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lf Adobe’ started shipping Photoshop 6.0 in October... 
how did NAPP members leam to use 6.0 
new features three weeks before it shipped? 


Nearly a month before the general public started 
getting their copies of the most expansive Photoshop 
update in years, members of the National Association 
of Photoshop Professionals (NAPP) already knew 
what the new features were. And better yet, they 
already knew how to use them. 


ghotastion weer 


How's this possible? Well, it’s because NAPP with 
Adobe's help, created a special all-Photoshop 6.0 
issue of their highly acclaimed “how-to” magazine 
Photoshop User.The day Adobe announced Photohsop 6.0, it was already on its way 
to NAPP members, over a month before 6.0 actually shipped. In this special 6.0 issue, 
NAPP members learned all the new features, including Layer Styles, the new Web 
tools, the new type features, vector shapes, and tons more. And on top of that, the 
minute Adobe made their announcement, every member had access to QuickTime 
videos, feature articles, and discussion forums all on 6.0 from the members-only Web 
site. That's an example of how the NAPP keeps its members on the cutting edge. 


The NAPP is an educational organization just for people who use Adobe Photoshop. 
And joining this ever-expanding global community can change the way you use 
Photoshop forever. Membership is open to anyone using Photoshop and is essential 
for graphic designers, ad agencies, photographers, Web designers, educators, print 
shops, publications, or anyone who realizes that there's more to learn about 
Photoshop than there is time to learn. 


Join today, and we'll include that special all-Photoshop 6.0 issue in your new member 
kit. Plus, as a member, you'll also enjoy a host of member benefits, including: 


+ A free subscription to Photoshop User, the highly acclaimed 
Adobe Photoshop “how-to” magazine 


Big discounts on software, hardware, upgrades, peripherals 
seminars, videos, Web hosting, graphics magazine subscriptions, 
and even car rentals, hotel discounts, and more! 


Access to the private members-only Web site—the #1 Photoshop 
resource on the entire Web 


. 


Expert Photoshop tech support and real-world advice 
just for members 


Invitation to PhotoshopWorld, the NAPP’s annual convention 
and the largest Photoshop event anywhere in the world 

Plus there's so much more. We invite you to join the thousands of people in 64 
different countries who have made the NAPP the most complete resource for 
Photoshop training, education, and news in the world. 


The National Association 
of Photoshop Professionals 
The Photoshop Authority 


A one-year membership is only £87 ('129 U.S.) 
Join today by calling 001-727-738-2728 
or enroll online at www.photoshopuser.com 


Corporate and International memberships available. Photoshop and Adobe are registered trademarks of Adobe Systems, Inc. 
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America’s *1 


training seminar 
Is coming to London 


Adobe 
Seminar Tour 2001 


America’s most popular Photoshop seminar is 
headed your way, featuring Photoshop User 
magazine Editor Scott Kelby 


If you want to improve your Photoshop skills fast, you've got to spend 

the day with us. This is not a demo day—it's all the real-world inside 

secrets, proven techniques, hidden tricks, creative ideas, and timesaving 

tips that can cut your production time in half! We focus only on the most 
important tools and techniques, so we can pack more valuable info into this 
Photoshop seminar than anyone. |n fact, there’s no risk, because it’s 100% 
money-back guaranteed! 


Mastering Layers (10:00 - 11:00 A.M) 
You'll learn the power of Photoshop layering capabilities and 
the secrets the pros use to create incredible multi-layered images. 


Scanning and Correcting Images (11:15 - 12:15 P-M,) 
Learn the scanning techniques of the pros and how to create crisp, 
professional-looking grayscale and colour images using our step- 
by-step method. 


Lunch Break 12:15 - 1:15 P.M. 


Down and Dirty Tricks (1:15 - 2:30 P.M) 
This session features our most requested “cool” Photoshop effects 
presented in a step-by-step format. 


Class Schedule 


Photo Retouching (2:45 - 3:45 P.M.) 
You'll learn the photo retouching techniques of the pros and how 
to quickly restore bad or damaged photos. 


Designing Cool Web Graphics (4:00 — 5:00 PM.) 
Learn how to create cool Web graphics that look great and load 
fast! Learn the pro's secrets to creating the smallest possible files. 


One day only « February 17, 2001 
Business Design Centre, Islington, London 
Register Today 


Adobe Seminar Tour 2001 
Only £99 per person 


Include S at _ es Root oks, shortcut desk reference Only 

Seating is limited.Register online at: b) 

www.photoshopseminars.com | caynPP 

orcall us at: 001-727-733-6225 mempets 
Hosted by: 


TN: PP) The National Association 
of Photoshop Professionals 


Produced by KW Computer Training. Photoshop is a registered trademark of Adobe Systems, Inc. 
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Dreamweaver extensions 


The future of Web design 
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52. Netscape 6 


The definitive guide to art, design and technology 


Subscription hotline: {t) 01458 271 108 
Customer services on [t] 01225 822 510 


fe] support@futurenet.co.uk 
[t] 01225 822 743 and ask for 
CD technical support 


[t} 01225 442 244 
Gary Beli advertising manager 
fe] gary.beli@futurenet.co.uk 
{t] 01225 442 244 
fe] ca.mail@futurenet.co.uk 


All cortents © Funsre Publishing 2001 
fotore Gornputer Anais the registared Z 
titted ‘rademarkofFuturePublishing Limited 
Seid Al rights reserved : 
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ec Of Destruction Derby and Driver. 
Animators 
iy 2 one 
Need to be competent users of a 
3D package, such as Maya or ? 


Softimage with at least 2 years 
experience. Comprehensive 
showreels must be submitted 
with applications. 

Recent graduates will also 

be considered. 
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Need to he proficient in the use of 
Photoshop and 3DS Max, of an intermediate 
standard or higher, with previous industry 
experience. Vacancies on 2 teams, both PS2, 
for those with excellent environmental 
visualisation skills. 
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Applications to 


Human Resources, 

Reflections Interactive Limited, 
Suite A5 Kingfisher House, 
Kingsway, 

Team Valley, 

Gateshead NE11 010 

or 
HROreflectionsinteractive.com. 


Work examples are essential if 
your application is to be considered. 
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Design and deliver distinctive, 
low-bandwidth Websites with 
Macromedia Flash 4, the 
professional standard for producing 
high-impact Web experiences. 


With its intuitive user interface, 
Dreamweaver 4 has everything 
you need to develop a professional 
Website with ease. You can also 
build Flash graphics directly 

in Dreamweaver. 


All the powerful new features of 
Dreamweaver 4, plus extensive 


features for developing databases 
on your desktop. 


Create, edit, and animate your 
Web graphics using a professional 
set of bitmap and vector tools. 
You can export your images 

into Dreamweaver and other 
HTML editors. 


The Web browser everyone 
should have! 


3D Web Button Tool (PC) 
Alto MP3 Maker (PC) 


Anfy (PC) 

Arles Web Creator (PC) 
Color Studio (PC) 
Cyberlink test 16-bit (PC) 
Cyberlink test 32-bit (PC) 
eNavigator Suite (PC) 
Homepage Upper 3.1 (PC) 
ImageVice 2.0.5 (dual) 
Internet Scene Assembler (PC) 
ProJPEG 5.0.2r2 (dual) 
Swish (PC) 

Top Style (PC) 
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The definitive guide to art, design and technology 
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Illustration: Matt Herring [e] matt.herring@virgin.net [t] 020 8361 4913 [m] 07970 283576 


The principles 
S of Web design 


Starting from scratch? Get it right from 
the beginning with a look at what's 
involved in creating a masterpiece 


s latter day landowners 
would sit back on the porch 
swing and consider the lay of 
the land before planting the 
year's crop, so designers should lean 
back on their swivel chairs and survey 
the state of the Web before launching a 
site into the fray. 

Web design is like no other form of 
media creation. Knowing how to apply 
the principles of design within the 
restrictions of the Internet medium is 
one of the most important skills a 
designer can have. While print 
designers don't have to worry about the 
download times of an advertising 
billboard and film makers aren't 
expressly concerned with the 
limitations of each viewer's television 
set, Web professionals are constantly 
challenged by different platforms, 
bandwidth limitations, levels of 


interactivity and demands of usability. 
While every design medium is 
progressing rapidly in terms of 
technology and creativity, the move 
towards the Web has exploded in 
recent years with the universal 
sentiment that without a Website you 
won't be able to address the maximum 
audience available. 

Whether you've already created Web 
sites or you’re a designer approaching it 
for the first time, the basics are 
essentially the same. 

Planning in advance, understanding 
the aims of the site, knowing the 
interests and limitations of the target 
audience, incorporating intuitive 
navigation and testing it across all 
platforms — each has to be considered 
in turn. The rush to create a 
good-looking site can often cloud these 
issues, but itis possible to combine > 
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Guardian Unlimited 

In a superb transition from print to 
Web, Guardian Unlimited 
(www.guardianunlimited.co.uk) 
retains the simple, authoritative 
newspaper elements but adds 
good navigation, sharp images and 


clear text. 


JibJab 


Loud and proud, entertainment 
site JibJab (www. jibjab.com) 
provides superb animated 
movies in an interactive and 


accessible environment 


Crouching Tiger 

The promotional site for 
Crouching Tiger, Hidden Dragon, 
the film by Ang Lee 
(www.crouchingtiger.com) 
presents information in an original 
Flash interface with many 


stunning extras. 


spark-online 

The explorers of electronic 
consciousness at spark-online 
(www.spark-online.com) offer 
contemporary debate with 
varied colour schemes and 


effective images. 


The Official Mr Benn 
One for the big kids, The Official 
Mr Benn site (www.mrbenn.co.uk) 
has an attractively smooth and 
constant design that successfully 
handles entertainment, 


information and e-commerce. 
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TED'S THE SUSINESS 


Ted Baker went back to basics with the new Ted’s the Business site created entirely in HTML with a 
smaller, simpler site for hand-held computers, (www.tedsthebusiness.co.uk) 


them all and establish a successful 
Web presence. 


The lay of the land 


Taking stock of why you’re doing it and 
what you've got to do it with are the first 
considerations. It’s easy to brush over 
this part in the race to see some results. 
Whatever the focus of your site, it’s 
important to decide on the objectives 
and what you'll need to achieve them. 

Spend time looking at related sites 
on the Web, how they’ve approached 
the content, navigation and colours and 
what you perceive their own aims to be. 
Approaching these sites as a user will 
provide an essential insight into where 
fellow sites or competitors succeed and 
fail and help you decide how to improve 
your ideas. 

Resources, financial and time-wise, 
make a vast difference to the amount of 
flexibility or space for experimentation 
within the project. Hand coding is ideal 
but WYSIWYG software with code 
editing can speed up the process. 

If you're not too well versed in HTML, 
then get an understanding of the basics 
before using an editing package so you 
have more control. You may need to 
brush up on skills, learn a new program 
or get some help to achieve the effects 


The official site for the band Coldplay 
chooses original and dynamic navigation 
and takes visitors around the site via a 
totating polyhedron. 


you want for individual site elements. 
It's important to know this in advance in 
case you hit a brick wall later on. 


Who's buying? 

The most vital consideration in planning 
a site is the identity, needs, experience 
and capacity of the user and, of course, 
their platforms. The purpose of a site 
determines who will visit it and a 
clearly defined purpose means there’s 
a greater chance that the right audience 
will find it. 

Information-based sites such as the 
Daily Telegraph (www.dailytelegraph. 
co.uk) will often avoid overuse of 
graphics or animation and rely on 
typography and layout to emphasise the 
content, the main focus for the user. 
Entertainment sites however, such as 
JibJab (www.jibjab.com), typically 
employ Shockwave games, sounds or 
streaming video to provide and 
enhance the content for fun and 
interactivity seekers. 

With special interest sites, such as 
iCrunch (www.icrunch.com), an 
independent MP3 download site, users 
are likely to want to interact through 
discussion forums, message boards or 
mailing lists. However these elements 
may not be necessary for online design 


Created using Macromedia Shockwave, the 
Epson Product Selector is a novel, interactive 
way to locate the most suitable product for 
your printing needs. 


How do the experts approach the design and development of a new Website? Andrew Brown, Creative Director at Fi System 
Brand New Media (www.bnm.co.uk), talks about ultimate sins and responding to the user 


|, occa : 


Heinz 


More traditional sites such as Heinz, require 
less intense graphical content and 
technology. It focuses on user interface, and 


IRN-BAU 


“In creating the Irn-Bru site (www. 
irn-bru.co.uk) the main considerations 
were to secure a returning audience and a 
growing database of users. By tapping into 
a side of the Net with the potential to keep 
itself fuelled with content (Web wind-ups 


easy access to information is imperative. 


and pranks) the site was a success.” 


(uk ) 


IAN BRU ic 


“We re-designed the Tizer site (www.tizer.co.uk) to complement Tizer’s sponsorship of Ant and 


Dec’s CD:UK. It brought together Flash, Shockwave, DHTML, ASP. audio, video and animation ina 


true multimedia fest. The audience wanted entertainment, the chance to win prizes and the 
opportunity to get the most out of its Web experience.” 


portfolios such as début art 
(www.debutart.com), which focuses 
much more on showcasing techniques 
via images, animations and multimedia. 

With regard to e-commerce sites, 
the sales path should be obvious and 
fast but offer avenues for more options, 
images and details about the product. 
Many users find what they want and 
come back at a later date, in which case 
the route from front page to item to 
shopping trolley should be as 
convenient and as secure as possible. 

This can be achieved through 
clearly identifiable sections and 
effective search facilities like those at 
online CD store, Audiostreet 
(www.audiostreet.co.uk). 

Determining the typical identity and 
desires of a user as wellas the likely 
limitations of their kit will make 


subsequent decisions about layout, 
graphics and content much easier. 
Trying to provide elements to suit too 
many users will confuse the site’s 
identity and put people off. 


Sowing the seeds 


When the time has come to get stuck 
into the construction of the site, it’s 
important that you already have a clear 
idea of what it’s going to be even if it’s 
not yet clear how it’s going to look. 

In print design, typography looks at 
the document as a whole, and how the 
text relates to other elements such as 
images, space and page furniture. With 
regards to the Web, the designer has 
less control over how the page will look 
ona particular platform, therefore the 
decisions to be made are more general. 
You can't decide exactly where every 


One of the top ten Web agencies in the UK, 
Fi System Brand New Media has worked 
with Heinz, Tesco, Durex and ntl. The 
Leeds-based agency provides 


entertainment and e-commerce sites with a 


focus on creative development and branding. 


The agency is no stranger to adaptability 
when converting ideas and brands for use on 
the Web. “The strange thing about working 
for a Web agency,” says Andrew, “is that one 
day you're creating an online 


payment system for a 


To find out what users think about the 
agency’s creations, the team has employed 
some interesting techniques. “User 
feedback comes in two ways. You can 

ask the user precisely what they think of a 
site and tweak areas to make it more 
user-friendly, but the danger here is that 
you are responding to a few people with a 
loud voice. Another way of gathering 
feedback from users is to analyse their use 


of your site.” 


blue-chip company and the 
next you're making a 3D dog 
leap around the screen ina 
game for eight-year-olds.” 
Self-proclaimed breakers of the 
rules of bandwidth, 
Andrew and his 
team emphasise that 
graphics, sounds and 
animations have 
their place - don't be put off by large file 
sizes, they say. “The ultimate sin is not in 
using them, but in not considering the user 
properly in the way you deliver them. Think 
about preloads - are you using them and 
where? Does your preload screen give the 
user any useful information? Could it load in 
the background while the user is on another 
part of the site? In the end, anything goes on 
the Web: the only sins are bad planning and 


poor execution.” 


word or image will appear, but you can 
control how the different elements of a 
page work together. 

It’s important to consider how users 
will click through each page and how 
the individual page structure will 
become part of the navigation. 


A site for independent music enthusiasts, 
iCrunch has a well-planned range of 

features to suit its audience - features, forums 
and mulitmedia. 


FI SYSTEM 


BRAND NEW MEDIA 


“When creating the Ice by Tizer Website 
(www.icebytizer.co.uk) we deliberately made 
the user interface 
exploratory by using 
unrelated words to name 
sections. The user didn't know 
where the links would 
take them. Analysis of 
hit reports showed 
that most users would 
click the centre icon 
and then the top-left and bottom-right 
icons. So new sections for this site were 
linked to from the centre while older 
sections were pushed around the page.” 
“The most important thing to remember in 
the design of a site is to justify everything 
you do. If it’s not fulfilling a job that needs 
doing then it shouldn't be there.” 


The size and type of fonts also influence 
the look of a page. Sites that don't 
differentiate separate textual elements 
are in danger of appearing flat. 
hmv.co.uk has a wide variety of 
information on the home page but fails 
to create a dynamic feel- many page > 


The online arm of the sarcastic US journal, the 
Onion, reflects the style of a newspaper by 
avoiding Web-safe fonts and generating 
image headers with its articles. 
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Principles 


On the crest of a wave 


Balancing the demands of the client, the needs of the audience and the vision of the design team takes time, but is well worth it 
according to Willem Mulder, Group Creative Director at Bluewave (www.bluewave.com) 


With a focus on design for e-business, 
Bluewave's impressive client portfolio 
includes British Airways, Volkswagen and 
Discovery Networks. The stakes may be high 
but the principles are 

the same from small 

to large Web agencies 

- planning and 

understanding. “It is 

vital to know the 

client's business plan,” explains Willem, “or to 
develop one in collaboration with them in 
order to create a good Web presence. Don't 


impose your own vision upon clients without 


Discovery 


Video footage from Discovery Channel 
programming was integrated with a Web 
environment to create a ‘people-led’ 
interactive microsite that provides Discovery 
Networks Europe with a communication 
channel to their advertising agencies. 


elements share the same weight and 
scale resulting in few obvious entry 
points. Unless the user is acutely aware | 
of the brand and knows what they’re 
looking for, they are unlikely to be 
enticed in by the front page. 

Weekly satirical newspaper, the 
Onion (www.heonion.com), generates 
effective headings through the use of 
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début art 


The début art site is a portfolio of digital 
designers and their work. Because of the rich 
design content the site itself has been kept 
plain and simple. 
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making clear to them the commitment they 
must make to ensure the continuing success 
of the plan. As a designer you may think these 
issues aren't your problem - more the domain 
of the creative 
directors. But it is 
important to share a 
belief in what you're 
doing, even if you 
don't agree on the 
development of the principles. This belief 
leads to understanding, and even if you don't 
feel too strongly about the project's success, 
understanding it at least will go a long way to 
creating something of worth.” 

Successfully carrying these aims to the 
audience is another important hurdle. 

“Contribute to the Web with unique 
ideas and expressions and you will make 
unique impressions. It is essential to keep 
an accurate image of the user in mind 
throughout the entire process. You can only 
help achieve the goals if you target the correct 
individuals and give them something they 
perceive is of worth.” 

“Create user profiles and make every 
decision with those users in mind. Question 
everything through their eyes: they’re the real 
decision-makers. The designer is the architect 


and must apply a process of logic and 


graphical elements which enable 
designers to closely follow the style of 
the original printed newspaper. The 
limitations of HTML headers and 
Web-safe fonts often lead designers to 
a graphical solution. 

When it comes to navigation, each 
style has its advocates and many are 
ready to fight their corner. Where the 


The recently updated www.computerarts. 
co.uk is now faster, friendlier and more 
interactive than ever. 


common sense to define and create the 
structure the user is navigating. There are no 
real ‘rules’ of Web Design. There is no ‘perfect 
formula’. What you create is unique to your 
client and their users. The right choices about 
the finer points of a Web space will be 
incidental - having approached the project 
with the right belief, logic and co-operation.” 


The new Volkswagen Asia-Pacific (VWAP) 
Website at www.volkswagen.com.sg presents 
the global brand to the highly diverse Asian 
market stretching from India to Tahiti. 
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21st Century Air Travel 


The British Airways 21st century microsite projects BA's new ‘21st century’ brand image. 
Pioneering 3D design and Flash techniques help to create a functional, consumer-interactive 
product. Click on www.britishairways.com/21stcentury. 


left-hand navbar is the most commonly 
used system, users are becoming 
increasingly familiar with top horizontal 
bars and dropdown menus. 

Having a strong idea of your 
audience helps in the making the final 
decision. Are they looking for hard 
facts? Will they want to browse or 
search? How experienced are they? 
How willing are they to explore? In 
addition, it isn’t written in stone that a 
user will enter by the front door: the 
navigation has to be constant and 
intuitive from any page on the site. 

The main issues to be aware of are 
clarity and speed before originality is 
brought into the frame. Achieving a 
balance between a striking effect and 
user accessibility will generate the 
most effective navigation. Using a 
rotating spider diagram (such as that on 
Coldplay's site at www.coldplay.com) on 
a directory site or an arrangement of 
rollovers on a site for beginners isn't 


likely to appeal to your users. Think 
about the user’s aims in visiting your 
site and what they'll be expecting. 

It’s also useful to think about 
navigation from a developer's own point 
of view. How easy will it be to add to the 
existing framework? If the original site 
has a set number of pages or sections, 
it’s important that it doesn't require a 
massive overhaul to expand on the 
content, include more images or 
incorporate multimedia. 

Constructing a site that is 
straightforward to maintain will save a 
great deal of time in the future. 

Colours also add to the identity of a 
Web presence. Choosing a palette to 
suit your audience is the first step and, if 
possible, avoid using coloured text 
except in headings. Often the colours 
will come instinctively with a logo, idea 
or subject, but at other times it’s more 
effective to vary the colours over the 
Pages or over time. 


wal year for movies, 
check out our sister sites for the 
Games of 20001 
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With an obvious search box, simple navigation and a wide range of products on display, the 
Audiostreet site is busy but practical. 


Monthly technology discussion e-zine, 
spark-online, retains a clear identity 
despite changing images and colour 
with each issue. The change in colour 
defines the individual issue but the 
particular hue and style provide a 
continuation of the site’s image. Along 
with colour schemes, navigation and 
structure are some of the most defining 
physical elements of a site. Ensuring 
they complement the content will 
encourage the user to come back again 
and again. 


Flash and fertilisers 


Giving a site an attention-grabbing 
boost with splash screens, animations, 
games and streaming media is a great 
temptation on the Web today. 
Interactive elements often bring visitors 
back for more but don't include them 
without first considering what they'll 
bring to the site and whether they will 
help or hinder the user’s journey around 
the content. 

If it’s appropriate to your audience 
and your content then go for it. If it’s not, 
then focus on improving different 
aspects of the site. There are many 
examples of unnecessary Flash intros 
on the Web and often the ‘skip intro’ 
button is not enough. Don’t put your 
users through the effort of loading and 
viewing the screen unless it reflects the 
theme of the site, showcases design 
work or lends to the atmosphere. 

If in doubt, restricting multimedia to 
one part of a site leaves users with slow 
connections to feast on other areas, 
while the bandwidth-hungry taste the 
wares. The product selector on the 
Epson site (www.epson.com) is an 
innovative way to provide a consumer 
search facility. As the user chooses the 
requirements of the equipment, the 


available products disappear until 
only the suitable ones remain. Simple 
and interactive, it’s an effective method 
of helping users find what they think 
they need. 

While the Web moves towards 
multimedia, plain HTML is undergoing 
a renaissance as the limitations of 
hand-held computers bring developers 
down to earth. The new Ted Baker site, 
(www.tedsthebusiness.co.uk) went back 
to basics by creating a fast-loading, 
plug-in-free site for the Pocket PC and 
professionals on the move. 

Creating a variety of features for a 
site is one of the best ways to learn new 
skills. While experimentation is one of 
the most motivating influences on the 
Web, don't go overboard by trying 
everything at once. 


Harvest time 


Once the site has taken form, check that 
its objectives and capabilities are as 
intended; that the typical visitor will be 
able to use the site and will want to go 
there. Sit colleagues, friends and 
clients down and let them experience 
the site first hand, and listen. If there are 
too many sections to navigate, think 
about how they can be joined together. 
If some pages are too cluttered, then 
don't be afraid to cut back on text or 
images, or spread it out over more 
pages. Overwhelmed users are likely to 
repress the experience into the depths 
of unconsciousness and never return. 

The process of designing a site is a 
learning experience. There are a Lot of 
styles and methods to try before it 
becomes intuitive. Pushing the 
boundaries of your skills and 
experiences while keeping tabs on the 
basics will ensure that your sites just 
keep on growing. EEE 


hmv I . ~ aie 
Red sale banners on the pink and 
black HMV site and confusing use 


of top and side frames make this 


site at www.hmv.co.uk unattractive 


and hard to navigate. 


eloys 

The cluttered site eToys site 
(www.etoys.co.uk) has already met 
its dot.com door but the overload 
of choice and busy pages didn't 


help users find what they were 
Sadly, eToys packs up its toy chest on 
Ith but to thank you for al your 
toto we'r ofng SOX of the orginal 
price ofa stocl Ck h 
ous 


looking for. 


THE HOTTEST 


Costa Coffee 

Auseless Flash intro, strange 
choice of colour scheme and an 
utter lack of content make the 
Costa Coffee site at 
www.costa.co.uk about as 


disappointing as it gets. 


Kwik Save 


A bright site that suits the 


Kwik Save brand but mixes — Ew ee 


consumer product details 


with press releases and 


‘THEPEOPLES 
ESOUON 


Alot of peopin spend time working out th New ven" resaitions 
if 1o the neghbous? Eat 2 ad 


corporate information. It soon 
becomes clear that 
www.kwiksave.co.uk sells nothing 


and is sadly confused. 


B det? Be kinse to 


Foodoo 


Excellent design, great colour 


@®> what 40 you want to cook? e 


schemes, good content andeasy is oi jcc > = 
to search. Foodoo (formally at 

www.foodoo.com) eventually 

folded in November 2000 

because it didn’t have any funding. 


Something to think about... 
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Illustration: Ray Smith [t] 020 7833 8268 [w] www.organisart.co.uk 


Perspectives 
in Flash 


3D effects add a whole new dimension to 
animated design — in a creative sense as well as 
quite literally. But there's no need to get bogged 
down in complex 3D modelling software... 


ack in the days of the 
Reformation, great masters 
discovered the art and science 
of portraying perspective in two 
dimensions - and changed design forever. 
Today we can exploit the same techniques in 
Flash animation to equal effect. 

In this tutorial, we show you how to create 
an exciting bubblicious mouse tracer 
speeding into the distance, to entertain your 
visitors while they wait for your main site to 
load. But that’s not all. We also create an 
innovative rotating 3D map, which you can 
use as an interactive centrepiece for your 
home page - fantastic for travel, architecture 
and other spacial topics. 


And finally, we give you some tips on 

how to combine classic parallax techniques 
with motion guides to give the hyper-real 
illusion of fish darting near and far through 
sunny waters. And all of this in just a few 
sweet kilobites... > 


uk. Flash 
for Mac/PC is available priced £259, [t] 0208200 
8282 or [w] www.macromedia.com/flash for 
further details. 


=) Expertise provided by Nick Nettleton, 
fe] nick nettleton@futurenet.co. 


io Files on disc : 

S,/  Youcanfind the CD files on this month's cover CD, 
inthe Dual/tutorial folder, labelled 
flashperspectivefx. 
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Part 1: Bubble graphic 


First task is to create the ‘bubble’ graphic and covert 
it into a Movie Clip symbol called ‘tracer’... 


Symbol labels 


Label your symbols clearly 


as you work. If you don't, you'll 
get in a mess half way through 
your project. 


g Draw a circle with a 1px white outline, and set 
its Fill to a Radial gradient (in your Fill palette) 
with bright blue-green tones. Select the Fill tool, 
click the Transform Fill button at the bottom of the 
toolbar, and distort the Fill for a 3D look 


SSAmasa 


Select the Fill and hit F8 to convert it into a 

Graphic symbol. This is so you can now use the 
Effect palette to set its Transparency, or Alpha, to 
about 40 per cent. Finally, draw a white highlight 
over the Fill. 


GSAeRG 
wus 


q Select all the bits of the graphic, and hit F8 to 
convert it into a Movie Clip symbol called 
‘tracer’. At the end, you will be able to just dump 
this into any Flash movie to add a tracer. In the 
meantime, double-click the clip to work inside it. 


Part 2: Basic trailing motion 


The motion involved in this effect is pretty complex 
so we'll start simple and build it up step by step... 


' 


Test run 


You can hit Ctrl+Enter (Mac, 
Command+Enter) at any time to 
test-run your movie, and see if 
it's working okay. You can also 
double-click a frame to apply 
actions to it - much quicker than 


navigating the menus. 


G First, within the ‘tracer’ clip, select the bits of 
the ‘bubble’ graphic and hit F8 to turn them 
into a Movie Clip symbol again, this time called 
‘bubble’. Then in your Instance palette, name this 
instance ‘bubble’ too. This is so you can use 
ActionScript to send it commands 


4 | At frame 3, add an Actions>Duplicate Movie 
Clip action. Use the Target icon to set the 
Target to ‘bubble’, and set the new name to the 
Expression ‘bubble'+bubble. So if bubble=1, the 
new name will be bubble1. Set Depth to ‘bubble’ 


Web Design Special 


ey Create a new layer called ‘code’, and add two 
new frames. Double-click frame 1 on the Code 
layer, and add an Actions>Start Drag action from 
the + menu. Click the Target icon and select Bubble 
in the Target dialog. Hit OK, and also check Lock To 
Mouse Centre. Test your movie and you'll see the 
bubble follow the cursor. 


G After this, you need to add two more lines: 
bubble=bubble+1, and then GoToAndPlay (2), 
which loops the clips via frame 2. Now test your 
movie. You should find that the bubble duplicates, 
following your mouse — but the duplicates don’t 
move or disappear. This is what we'll fix now... 


DA Fame Actions] 


+| =!) Frome Actions z ff aa ¥ 


StartDrag ("bubble", true); 


g Put new keyframes on the Code layer at 
frames 2 and 3, and at frame 1 use Actions>Set 
Variable to set bubble = 1 (note that the Value is an 
Expression). This will track how many bubbles we 
have going. 


OSAmaAMD 


G Double-click the ‘bubble’ symbol to edit it, 
then select all the parts of the graphic and hit 
F8 to turn them into a graphic symbol, called 
‘bubble graphic’. This is so you can apply a tween. 
Add a keyframe at frame 20, and scale the ‘bubble’ 
graphic down to a tiny dot at this point. 


Now in your Frame palette, apply a Motion 

tween to frame 1 with Scale checked, to give 
the illusion of the bubble moving into the distance. 
Set the easing to 100 (out), because objects appear 
to move more slowly the further away they are. If 
you test now, you'll see the tween is looping itself. 


_| 


k 
| 
Line 1: removeMovieOip (Thi) 


Tage [ns 
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Instead, we want to remove the bubble 

altogether — so add'a keyframe at frame 21 of 
the ‘bubble’ clip. Delete the graphic at this point, 
and replace it with a Remove MovieClip 
ActionScript. Use the Target icon to set the target to 
‘this’, making sure the Expression box is checked. 


9 | If you check out the movie now, it looks pretty 
cool. But it's not quite perfect yet: we want to 
add two more features. First, the bubbles only 
stream when you move your cursor, rather than all 
the time. And second, we want to add a rotating 
motion, so they stream around the screen. 


Part 3: Complex motion 


Adding ActionScript and creating rotating motion 


Scripting modes 


In your ActionScript viewers, 
there's a small menu to the 


top-right, which gives you some 


options. Among these, you can 
choose between Normal Mode 
and Expert Mode. Expert Mode 
enables you to type code directly 


into the script pane, while 


A Frame Actions] 


+) =) Frame Actions 
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Normal Mode offers boxes for 
you to insert the info and types 


the code for you 


To achieve the first of these, you need to 

constantly track and compare the mouse 
position — nothing too complex. Double-click the 
stage, so you're now editing the ‘tracer’ Movie Clip 
with three frames, and double-click frame 2 to add 
some ActionScript here. 


4 | You need to set the Alpha of the ‘bubble’ clip 
to 0 in your Effects palette, so it doesn't show 
when the mouse isn't moving; and then on frame 3 
set the Alpha of the Duplicate Instance to 100 per 
cent. To do this, add an Actions>Set Property action, 
like this: setProperty (“bubble”+bubble, _ alpha, 
“400"), straight after the Duplicate Action. Note 
that the Target field is an Expression 


No action selected 


No Pacametets: 


Use Set Variable to add the variable oldX, and 

for the Value box select Properties>_xmouse, 
setting it to an Expression. In the same way set oldY 
= _ymouse. Now at frame 3 we're going to compare 
the mouse position to these values, and set the 
Duplicate Movie Clip to happen only if it's changed. 


5 | To create the rotating motion, you want to 
double-click the ‘bubble’ clip to edit its tween, 
and in the Frame palette set Rotation to CW (for 
clockwise), 1 time. To make the rotation more 
exciting, double-click the ‘bubble’ graphic symbol, 
select all the bits, and offset them diagonally from 
the centre by a hundred or so pixels. 


A Frame Actions] 
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gotoAndPlay (2); 
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No action selected 


No Parameters 


o At frame 3, add an Actions>lf action, and in 
the Condition box, type: 

_xmouse!=oldx || __ymouse!=oldY. Literally, != 
means ‘not equal to’, and Il means ‘or’. Then drag 
the Duplicate Movie Clip and bubble=bubble+1 
lines within the curly brackets of the ‘if’ clause. Not 
quite done yet, though 


Finally, double-click to edit the ‘bubble’ 

symbol, and at either end of the tween, move 
the centre of the ‘bubble’ graphic back over the 
centre of this clip. This makes sure the bubble moves 
from where the mouse is. Check it out — it looks 
fantastic. And you're done... > 
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Part 4: 3D rotating map 


Now we move on to the rotating map. The first stage is to create the 3D frames... 


There are many different applications you 

can use to do this, including Swift3D, Vecta3D 
and others, as well as FreeHand 9, which we're 
using. Its 3D Rotation tool (in the Extra Tools bar) 
enables you to distort a whole series of images in 
Z-space in one go. 


f 4 | Now duplicate the new layer to create a third 
map, and rotate this map by -30 degrees. (The 
negative figure keeps the rotation clockwise.) 
Repeat this process until you have a wheel of maps 
completing a full 360 degrees, each one ona 
separate layer. You should have 12 in all. 


Le to be in a vector format. You can draw your 
own, trace a bitmap, purchase one royalty-free, or 
indeed use ours, which is on the cover CD. This is a 
map of Peru, with the outline traced by hand and 
the contours autotraced and cleaned up. 


Now hit Ctrl/Command +A to select all, and 

using your 3D Rotation tool, click in the centre 
of the wheel of maps, and drag upwards to distort 
them in Z-space. Experiment with different starting 
points and angles, and try applying the tool more 
than once to get dramatic cartoon effects. 


First, however, you need your map, which has 


far 

3 | Next, select and group your map, and then 
use the Options in the Layers palette to 

duplicate the layer it's on. Select the new map, then 

double-click the Rotate tool to open the Transform 

palette and rotate it by -30 degrees. This will make 

the second frame in your animation. 


G Now File>Export this as a Flash SWF, using the 
Setup to make sure animation from Layers and 
Autoplay are set in the Setup options. Check out the 
SWF - this is your rotating map. Next we take it into 
Flash, to fix any glitches in the animation by hand, 
and make the rotation interactive. 


Part 5: Interactive rotation 


This is a little complex, because we want the animation to go clockwise 
and anticlockwise, depending on which button the user presses... 


Web Design Special 


Create a new document in Flash and 

File>Import the SWF of your rotating map. 
You probably need to centre and scale the frames, 
so click the Edit Multiple Frames icon under the 
timeline, drag the bars at the top across all your 
frames, and drag-select everything. Then make 
your adjustments. 


2 | Select each frame in turn and group its 


contents, then hit Ctrl/Command+Enter 


to preview the animation. Look out for any 
off-kilter frames, go back and adjust them, and 
make any other tweaks you need to. When you're 
happy with everything, we're ready to start 
making it interactive. 


3 | Select all 12 frames and hit Ctrl+Alt+X 
(Command+Option+X) to cut them. Then hit 
Ctrl/Command+F8 to create a new Movie Clip 
symbol, calling it ‘map’. Select its first frame and hit 
Ctrl+Alt+V (Command+Option+V) to paste your 
frames, then double-click frame 1 to open its 
Actions viewer. Add a Basic Actions>Stop action. 


The Library 


The Library in Flash stores all 
your symbols, bitmaps, sounds 
and so on, so you can quickly 
reuse them — and without 
increasing file size by the full 
whack every time. Keep it well 
organised with folders and useful 
names, otherwise you'll get ina 
muddle as your movie gets 

more complex. 
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4 | Now click Scene 1 below your toolbar to go 
back to the main stage, then open 
Window>Library, and drag the ‘map’ clip over into 
the middle of the stage. Open your Instance palette, 
and name this instance ‘map’ as well. 
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5 | On a new layer, design two buttons that the 
user will press to rotate the map in either 
direction. Select the first, and hit F8 to convert it 
into a symbol, choosing the Button option, and 
giving it a useful name. Then convert the second 
into a button too, in the same way. 


on (release, releaseOutside) { 


direction = 0; 


Now select your backwards button, and in the 

Actions viewer, add an Actions>Set Variable 
action, setting direction=-1 (remember that the 
Value is an Expression). Select on (release) and 
change it to a press event. Then duplicate all three 
lines, setting direction=0 for the release and release 
outside events. Do the same for the other button, 
but set direction=1 instead. 


telltarget (map) ¢ 
newFrame = currentframe+di rection; 
if (newFrame>_totalframes) { 


newerame = 1; 
} 


if Cnewrrame<L 


10 Next, add an Actions>if action, setting the 
condition so you have 
if(newFrame>_totalframes), and within the curly 
brackets, set the variable newFrame=". After the ‘if’ 
clause, add another if, this time if(newFrame<1), 
and within this, set newFrame=_ totalframes. These 
make sure the animation loops properly. 


Next, select frame 1 on the Code layer, and hit 

F6 twice to add keyframes at 2 and 3. At frame 
3, add a Basic Actions>Go To action, setting it to 
GoToAndPlay Frame 2, to create a constant loop. At 
frame 2 we're going to add action which checks 
which frame the ‘map’ Movie Clip instance is at, 
looks at the Value of ‘direction’, and sends it to the 
relevant frame next. 


telitarget (map) ( 

newFrame = _currentframe+_root.direction 
if (newrrame>_totalframes) { 

newFrame = 1; 


} 
if (newrame<1) { 
newFrame = _totalframes; 


11 | Finally, after the ‘if’ clauses (but still within the 
Tell Target), add a Go To action. Set the Type 
to an Expression, and the frame as newFrame. 
Uncheck Play, so the code reads: gotoAndStop 
(newFrame). Now you can test the movie, and you 
should find it works perfectly. Check what you've 
got against our FLA file on your CD. 


ld 
3 
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G We're going to use ActionScript rather than 
frame-play to control the animation, with a 
variable called ‘direction’ to track which direction 
we're going in. direction=1 will mean forwards, -1 
backwards, and 0 no motion. Create another new 
layer called Actions and at 1 use the Actions viewer 
to add an Actions>Set Variable action, putting 
‘direction’ in the Variable field and 0 in the Value 
field, checking the Expression box here. 


[Line 2 newFrame » carertiiamesdrection, 


Yast, [rrr 


Vatoe [earn ene direction 


SSAMmag 
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9 | So select frame 2, and add a Basic Actions>Tell 
Target. Click the little Target icon and choose 
‘map’ as the target. Within the Tell Target, add a 
Set variable, setting newFrame=_currentframe + 
_root.direction. You'll find _currentframe in the 
Properties submenu, and note that the Value is 
an Expression. 


12 Once this works correctly, your next task is to 
make the maps interactive, by editing each 
individual frame and applying buttons and so on. 
Check out the example SWF on your CD for some 
ideas, and take a look at issue 53, where there is a 
tutorial on creating interactive maps. > 
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Part 6: Motion guides in 3D 


You may think tweening is out when you want to create 3D animation in Flash — but with 
a few tips and tricks from the old masters, you're back on track... 


Motion paths 


A motion path is a line or curve 
just like any other, but instead 
describes a path of movement, 
rather than showing onscreen. 
Draw it with your Bezier pen or 
Line tool. The colour and 
thickness doesn't matter. 
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& Motion guides offer a way to tween an image 
along a path —a fish swimming in water, for 
instance. Create a graphic of a fish, including some 
shape-tweened swimming motion - or use our 
graphic, which is on the CD. It doesn't include any 
directional movement at this stage. 
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4 | Now if you play the tween, you'll see the fish 
follows the path, but it doesn't look that great. 
First, check Orient To Path in your Frame palette. 
Experiment with rotating and scaling the fish at 
either end of the tween to get the orientations 
perfect. Then scale the fish down smaller at the 
beginning of the tween, and you have the 
beginnings of a 3D effect. 


Yew uct Madly Tet Cortcl Werow Hey 
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Use scaling distortion and rotation with some 
additional keyframes to create this, and things 
look better already. But you also need parallax, 
which says that objects appear to move faster as 
they come closer, and slower as they move away. 


Yer It Moiiy Test Corts Wieden Hele 
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2 | Turn the graphic into a Movie Clip symbol. 
Then, in the main timeline, on a new layer 
above the fish, use the Pen to draw a curvy path 
you'd like the fish to follow. Add 100-odd frames to 
all the layers, and then click the centre of the fish 
and drag it over the beginning of the path until it 
locks centre. 


Yew let Mostly Tet Conteh Widow Hele 
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3 | Put a keyframe at the last frame of the fish 
layer, and at this frame, position the fish at the 
end point of the path in the same way, then 
right-click frame 1 and click Create Motion Tween. 
Now right-click the Motion Path layer and select 
Guide. Finally, click and drag the Fish layer up to, 
but not over, the Path layer, so it indents and the 
Guide becomes a Motion Guide. 


‘Yom Irae Mediy Tew Contot Window Help 
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G Pick out some points on your path where you 
want the fish to appear to come closer or go 
further away, then find the frames where the fish is 
at its nearest and furthest points, and add keyframes 
to the Fish layer there. Then scale the fish up or 
down accordingly, at each of these frames. 


Some 
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Add some in-between points with smaller 

variations, and tweak the rotations at all the 
keyframes to get them looking just right. The effect 
is starting to come through, but still needs work. 
There are two things to think about: perspective, 
which means that as the fish turns to come closer or 
go further away, it appears thinner... 


3 Yew Jet Nodly Ten Conmot Mindi Hele 
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techniques: drag keyframes closer together 
and further apart to define discreet changes in 
speed; and use the Easing In/out slider in your 
Frame palette to apply Speed gradients between 
frames. Also, try making the fish more transparent 
or less bright when it's further away, using the 
Effects palette. 


9 | Using this combination of techniques, you can 
create powerful 3D-motion effects. Combine 
the fish with several more, all moving in parallax and 
perspective with fish-like darting motions, and the 
animation starts to look pretty impressive. Check 
out the SWF on the CD and see for yourself. EEE 
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1. The Lost But Not Lost 
Website was created to 
promote Levi's new 
SilverTab™ line in the 
US. It uses Lateral’s 
DHTML navigation 
device which gives 
visitors many options. 
They can either ‘get lost’, 
which takes them to 
random distributor sites, 
they can go ‘Fwd’ to the 
next event in the 
narrative or ‘go behind’, 
which takes them to the 
lost equipment and 
products page. 


Lateral 


Thinking and working laterally has paid dividends for this 
award-winning London Web design company, who believe: “to be 
creative you've got to keep it small and focused...” 


one of us want jobs really,” says Jon Bains, 


j Chairman at Lateral. Not surprising then, that 
: i when you visit the company’s site the 


categories ‘work’ and ‘play’ are given equal 
billing — for Lateral, they're two sides of the same coin. 
Despite a client list that sounds very serious indeed, 
with names like Levi's, EMI, Sega and Boddington’s 
among others, the company has risen to dizzy heights 
by sticking to a simple but vital guiding principle: let 
specialists be specialists, and let people play. 

In the technology-saturated, skill-focused world of 
high-level Web design, this may sound like a blueprint 
for extinction. But for Jon, it doesn't lead to stagnation, 
but its exact opposite: “You end up with multi-skilled 
people anyway, because most people don't want to 
specialise in just one thing,” he explains. “So it’s 


allowing people to explore themselves and play 
around. People will naturally gravitate towards 
something, but it doesn't mean they’ ll exclude 
everything else,” he says. One of his frustrations 
with Flash wizardry is that it is often cultivated by 
up-and-coming designers at the expense of a 
well-rounded view of communication. 

The brainstorming session is a prime example of the 
Lateral approach, with every member of the company 
invited to make a contribution. And although 27- 
person brainstorms don't always go so swimmingly, 
more often than not the result is a synergy rather thana 
cacophony: “Everyone’s got a different take on the 
project and different skills, so when it works you just 
see people jamming off each other,” Jon says. “You're 
constantly amazed by these bizarre concepts that are 


Online games are fast becoming the 
way to make e-commerce sites 
‘sticky’... so it makes sense to 
combine them with a banner ad and 
create a ‘banner game’. Lateral, 
partnered with Electronics Boutique, 
did just this for their client 
HowGAMEareyou.com. 

Three of the four games were 
designed and created by Lateral, and 
Romandson.com did the other. One 
was a DHTML banner, the other three 


HOW GAME ARE SOL? 
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were Shockwave banners — all had a 
retro feel to them. 
HowGAMEareyou.com, launched in 
December 2000, is a online campaign 
site that aims to establish GAME 
(www.game.uk.com) as the hardcore 
place to shop online. Banners appear 
on Liberty Surf, freeloader.com and 
Dennis Publishing sites, asking 
whether users are “game enough.” If 
the user decides that indeed they are, 


then clicking on the banner takes them 


HOW GAME ARE 


through to the howGAMEareyou.com 
mini-site. There users are asked to 
select a console of their choice: 
PlayStation |, Dreamcast, PC, 
Nintendo64, and Game Boy Color. 
From there, they can choose to play 
one of four games: Airfox, Rundam, 
Roadrage, and Grabber. High Scorers 
have the chance to win prizes such as 
PlayStation 2, their top five titles or 
various peripherals of their platform 


choice, otherwise they're sent a list of 


HOW GAM 


HUW GANIE ARE 


special offers redeemable from the 
GAME site. 

An offline campaign also goes hand 
in hand with the online antics. Visitors 
to the GAME stores receive a free 
sticker containing a collectable image 
from a relevant game ona specific 
platform. The sticker contains the 
howgameareyou url and a cheat for 
an online games at 
www.howgameareyou.co.uk helping 


users get into the prize draw. 
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Triuarph Front Fastening Sports Bra. 

Features Tactal Acquator fabric, which keaps you cool by taking the moisture away 
froma the skin. Seamiree for smoothness and comfort. Stylish racer back 

Sites: 32-96 A, 32-38B/C, 34-38 D 

Pricas€19.00 

Chick on photo to roem 


| Fibre content: Polyamide 75%, Elastane 25%. 


colour =) (seep = > PT nates 


Checkout 


acer Back Sports Seamtree Spores 
Top 
,) 
a | 


entail 


MPIRE 
tim 
popcorn.co 


Stella Chart we have 
Fagra’s “Toea's Mracle™ ¥ ‘Aegis Wargnier 
expect n 20019 Raga o€ bs king stn rr yaar oi 
? tte ow yaa fete 
‘Need Me reaased on Jaruary 1 dw? 
r “ 


200 
rolaases 
hyped Free Last” tom ‘Seson. and “The Oavhside” 


eu.levi.com ““"""" 


SeSaqcirive 


PSS RTO 


Pn Sate eR Sor REE RTS eee 


Designer Sam Collett takes us through the stages of designing a Website for Levi® 


a 13.9.00, Initial briefing: The client introduces Lateral to ei After briefing, Sam checks out some books and sites, 3] 23.11.00, Response to brief: Vintage is a very trusting 

the ‘concept’. Levi's® Vintage Clothing revive a new and starts concentrating on the look and feel. He places client, and the site has a fairly simple structure and 
period of fashion history every launch, illustrated with mood himself in the mindset of the creatives from the chosen format, so sketches will do at this stage. Sam will also have 
boards, sketches of the relevant products, and a booklist, period. It's kind of a weird process, and it sounds kind of worked out the technical requirements by this point. 
which becomes Sam's, initial source of inspiration. arty, but it works for him. 
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1. Splendour: Lateral 
created a premium 
online brand and 
developed a fully 
functional e-com site 
which is quick to 
navigate. 


2. Positiva Records: A 
minimal, cool site for 
one of the country’s 
most popular dance 
labels, 


3. Levi®: This site 
houses all of Levi's® 
product ranges, and has 
up-to-date store and 
events information. 


4. Harry Potter: 
Commissioned by 
Bloomsbury Publishing 
PLC to develop the 
official European Harry 
Potter Internet presence 


5. Stella screen: Created 
to allow Stella Artois to 
reach its film going 
public. 


6. Additive Records: A 
site for a dance music 
record label, where you 
can change the 
backgrounds. 
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30.11.00, Creative sign-off + Creative Freeze. After 


coming from people. It's an old cliché but a good idea is 
a good idea; it doesn't matter where it comes from.” 

Good ideas have been Lateral’s collateral since the 
company formed in 1997, out of the ashes of the aptly- 
titled Obsolete agency. 30 people was agreed as a 
realistic staff limit, to ensure that everyone could get to 
know each other and enjoy working there. While the 
original intention wasn't to become a giant global player, 
the opportunity for expansion has often presented itself. 

At one point during 1999, the company was turning 
down nine out of ten jobs it was offered but resisted the 
temptation to scale up and recruit. Today, Jon feels that 
he’s been vindicated by the dotcom backlash and stock 
market uncertainties of the last six months which have 
claimed the scalps of many a design company. 

Global domination may not be on the agenda, but 
global recognition most certainly is. The company’s 
portfolio contains such phenomena as the UK version 
of the legendary Blair Witch Project site and Harry 
Potter's Web presence: “We like doing things that 
people see — we don't do huge intra- or extra-nets, we 
like doing things that people can use and enjoy, which is 
kind of the best place to be,” says Jon. 

Levi's has been Lateral’s most consistent client 
(Jon's own involvement with the company stretches 
back to before 1995) but the ubiquity of the brand hasn't 
meant that Lateral have had to sacrifice their prized 
creativity: “The thing is, up until the Flat Eric stuff we 
had an amazing client in Peter Ingwerson,” says Jon. 


One of Lateral’s more wayward 


offspring came into being when it set begins when they click a seemingly 


to work on the Web campaign for 


kind of anarchic feedback loop that 


innocent banner ad. From there, a 


“His biggest criteria was ‘is it cool?” 

Reinventing and revitalising the same brand has 
turned Lateral’'s imaginative powers inside out over the 
years; never more so than with the recent (twisted) 
Levi's Engineered Jeans campaign, in which Lateral ran 
the gauntlet of Web conventions: “We knew full well 
that nobody was going to get their head around that. You 
can do the most simplistic site in the Universe and it 
can be the best designed if it’s the most appropriate,” 
says Jon. “You can also do the most elaborate, Flash- 
text-flying-around Flashturbation and nobody uses it.” 

In general, Lateral places its emphasis on site 
architecture, easy site access, and sticking as closely as 
possible to the client's brief. 

Jon sees interesting quandaries for brand 
development cropping up in the future, with companies 
having to provide consistent advertising across every 
emergent technology from WAP phones to the Xbox. But 
for Lateral, adapting won't be a problem, and the route 
the company takes will be dictated ultimately by its own 
concerns rather than any technological imperative. 

Lateral is content to play on, whatever the climate: 
“We try our best and hopefully most of the time we 
succeed, “Jon says. “There are a number of oases in the 
desert and you just have to go look for them. Hopefully 
we'll have water for a while,” he concludes. EX 


game, though, they are transported 
back to a simulacra of the original 


the campaign proved too avant-garde 
for the advertiser's tastes. 


page in which familiar page elements Nevertheless, it achieved a 10 per cent 


Lynx’s Apollo deodorant. Rather than game starts up which the user canplay have been subverted according tothe _ click-through average during the three 


attempting a traditional Website, 


Lateral’s design involves the user ina motive. When they try to escape the 


involved, then he'll build mock-ups. 


oblivious to any hard sell or ulterior 


4 | 5 | 19.12.00, First approval: Next, Lateral runs through the 
reviewing Lateral's sketches, and asking questions, bare bones of the site — navigation, products, and the 
Levi's® generally sign-off the creative straight away. Sam 
then starts designing the layouts in Photoshop. The next 
stage only requires flats, but if there's unsecure technology 


fun bits. Because of his good relationship with the client, 
Sam's usually ahead of schedule. By this stage he'll have 
done most of the site build, minus the content. 


Para-site’s subliminal connotations, 


Go 20.12.00, stage 2 build: The hardcore testing. There 
were a bunch of bugs, mostly with Webfont Wizard, 
which Sam had only used once before. It was interfering with 
some of the JavaScript functions, and it wasn't behaving 
properly with his stylesheets. 17.01.01, final approval: The 
things that get queried are spelling mistakes, and any 
additional content provided by the client. 01.02.01 site launch. 


wishes of the advertiser. Thanks tothe weeks it was online, and is unlikely to 
be the last experiment of its kind. 
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Fireworks 4 Tutorial 


The new features 


Souped up and streamlined, the latest crop of new 
features tackle Selective Optimisation and animation, 
as well as reinventing familiar actions like rollovers 


ireworks has ruled the roost 
in terms of pure Web graphics 
ever since it first hit the scene 
just over two years ago. With 
four releases in such a short period, you'd 
think that Fireworks must have already 
had all the possible functionality 
squeezed out of it. Hard to believe, but 
Macromedia has introduced not just 
workflow improvements but a host of new 


and exciting (well, relatively exciting) 
features which once you've got to grips 
with, you'll wonder how you ever managed 
without. Here is a round-up of how to use 
some of the exciting new features like 
Selective JPEG Optimisation and 
Animation functions, and how to get the 
most out of some of its older but much 
improved capabilities like creating 
rollovers and dropdown menus. 


Illustration: Kerry Roper designer/typographer [t] 07976 7744820 [w] www,youarebeautiful.co.uk 


Part 1: Selective Optimisation 


The Optimisation palette enables you to specify quality 
on elements like buttons and text 


Interface 


The Fireworks interface now 
closely mimics the interface 
from Dreamweaver, 
Dreamweaver UltraDev and 
Flash. Macromedia is attempting 
to reduce the amount of different 
interfaces programmers and 
coders have to work in, and not 
before time! 


Allin one 


The new version of Fireworks 
has taken on-board the concerns 
of coders who use Dreamweaver 
and Fireworks regularly. 
Code-heads can now use the 
enhanced setup and export of 
HTML/ JavaScript and images to 
customize automatic file naming, 
table handling, and other output 
options, preventing too much in 
the way of application hopping, 


@ Optimising graphics has always been a pain - 
the inevitable result is quality graphics and 
massive file sizes or blocky, poor quality graphics 
and low file sizes. Fortunately, Fireworks has a great 
new Selective Optimisation feature. Open the 
graphic ‘logo_for_selective_optimisation.jpg' (on 
the coverdisc) in Fireworks. 
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4 | In the menus, select Modify>Selective JPEG 
and select ‘save selection as JPEG mask’. This 
then saves the selection you have made specifically 
for use with Selective Optimisation when you later 
export the image. You should see the selected mask 
change colour slightly. 
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ey The image will open surrounded by a blue 
border. If not, select it with the Pointer tool. 


5] Exit Image Editing mode by clicking on the red 
‘X' at bottom at the image window. 


In the Optimisation palette, choose JPEG from 

the Image dropdown menu and select 30 per 
cent for JPEG quality. In the selective JPEG field, 
click the icon by the text box. You will now have a 
new menu. Tick the Enable Selective Quality check 
box and select 90 per cent for the Selective Quality. 


8 | The Preserve Button Quality and Preserve Text 
Quality buttons prevent any loss of quality on 
specific elements — very useful for slicing complete 
Websites from graphics for minimum optimisation 
hassle. Click on the 2-up preview button to see 
your optimisation. 
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3] Now select one of the Marquee tools. Both 
Box and Lasso are suitable, but because we 
want to Selectively Optimise a circular object, we 
use the Circular marquee. Draw a marquee around 
the central logo. 


| 6 | Make sure you have the Optimisation palette 
on screen. If not, click on the Clamp icon at the 
bottom of the image screen or select Optimise from 
the Windows menu. 
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You can experiment with different settings and 
see the differences at the same time with the 
familiar 4-up option. > 
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Part 2: Building a dropdown menu 


Create great menus in minutes with the excellent pop-up menu creator 


In both camps 


The Dreamweaver/Fireworks 
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integration has been greatly 
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overhauled and is now much 
faster. You can even edit and 
update HTML and JavaScript 
code and graphics from 
Dreamweaver while maintaining 
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@ Fireworks has an excellent pop-up menu 3) Around the four buttons to the right of the 
creator, which sorts out hours of main logo, cut four slices. They should now 

tedious JavaScript for you. Open the @ Select the Slice tool. We will now cut up the appear green, unless you've previously changed 

‘popup_menu_for_dropdown.psd’ into Fireworks. image into rollover slices. your Preferences. 
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5 | Now choose Insert>Pop-up Menu and a new G Continue for the remaining elements of the 

- dialog box will appear. Type in ‘Home’ into the dropdown menu. Under the Home button, 

| 4 | The currently selected slice is shown with a first text box, then click the ‘+’ symbol. Home then we have ‘Home’, ‘About Us’, ‘Location’, ‘Staff’ 
mini cross-hair over it. Select the Home button. —_ appears in the area underneath. and ‘Employment’. 
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oe) role 

In this example, we aren't creating a linked 
navigation system, but you can specify your elements you have just created. We are going located underneath the relevant button. Simply 

hyperlinks from this dialog box. It's also possible to for Verdana, 14 point, Bold. When you have set go to Fireworks and reposition the blue ghosted 


select one of the Frame Target options if you are your rollover colours to your liking, click Finish and outline. Then select the next button and repeat the 
using frames. Now click Next. then Preview In Browser from the File menu. entire process. 


See eo as 
8 | Select your options for the dropdown 9 | Looks good, but we want the menu to be 
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Part 3: Using the new internal animation studio 


Now to create an animated logo using Firework's 
‘knotted rope’ timeline to click-and-drag the symbol 


Batch processing 


Fireworks has some very nifty 
built in Actions, similar to 
Photoshop ones. They can save 
masses of time if used properly, 
even enabling you to quickly set 


up and execute batch processes, 


including commands, with the 
new step-by-step Batch 
Processing Wizard. 


Create a new blank file and make its 
dimensions 600x300 pixels. 
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My final settings are: Pencil, Graphite, about 
40 per cent Edge Strength, 34 Size, Onyx 
Texture with 90 per cent Opacity. 
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Fal You should get the following dialog box. 
Select 10 frames, enter move 72 and direction 
0 degrees, which will move from left to right. 


G Select the Pen tool and draw a shape similar 
to an elongated ‘Z'. The same Bézier 
controls from Flash 5 are used, making it easy to 
reposition handles. 


Now import the file ‘round_logo_for_ 
navigating.psd’ (on the cover CD), and 
position the file on the top-left of the ledge. 


GESLI OCI SEA 


A blue ‘knotted rope’ will appear. Each knot 
represents each frame and where the animated 
object will move. You can click-and-drag the end red 
knot, enabling you to reposition and fine-tune where 
the symbol animates to. Now play the animation — 
your logo should move nicely across the screen. 


3 | We will now be using the Stroke menu to 
create an environment for a logo to roll along. 
You can set your own Stroke Parameters and they 
will appear in real-time as you select. Experiment 
with a few settings. 
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Choose Modify>Animate>Animate Selection 
from the main menus. 


rr. 


9 | From the Optimise menu, change the 
dropdown box to read Animated GIF instead 
of GIF, and then Save! You can also choose 
File>Export and export the animated creation as a 
Flash .SWF file. > 
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Part 4: Fireworks and Photoshop integration 


No need to use just one or the other, chuck both into the mix... 


Winning act 

The new versions of 
Dreamweaver and Fireworks 
have attained more top 
magazine awards than any of 
their previous incarnations, 
showing just how ingrained 
Macromedia software now is in 
professional Web circles, 


Gig 


Open ‘logo_for_selective_optimisation.psd" Now open the same .psd file within Fireworks. 


Z Sak = i 
Fireworks is the best program for pure Web a] @ 
ai (on the cover CD) in Photoshop. You can see Despite the .psd file having native effects 


graphics but for general image creation, most 


professionals still use Photoshop. Fortunately that we have a background and a logo as the added, Fireworks has successfully converted the 
Fireworks now integrates with Photoshop more foreground element, with two effects added: Drop non-rendered effects to a flat bitmap with the same 
closely than ever. Shadow and Outer Glow. layer structure from Photoshop. 


Part 5: Slicing images and creating rollover 


Select your layer, slice, insert a frame or two and click the Simple Rollover button. It's that easy... 


WBMP 


The new version of Fireworks can 
import and export images in the 
WBMP (wireless bitmap) format 
supported 


We sliced an image up earlier when we 
created the pop-up menu. However, slicing for © f —— - : 
rollover images has been souped up for this version. 3 Position the text over the buttons to your 
We are now going to use the navigation bar from liking by selecting the relevant layer and - 
earlier to create a rollover menu. Open ‘popup_ nudging with the cursor keys. Select the Slicing tool, Click the ‘Frames’ tab and click on the Insert 
menu_for_dropdown2.psd’ (on the coverdisc). as before, and slice around the four main buttons. New Frames button. 


5 | Select everything from layer 1, except the 
‘Grey Bar' layer and Edit>Copy. Then click on 
Frames, select frame 2 and then paste the layers. 


- J Reselect frame 1. Select the first slice, go to the Do this for all the rollover Image Slices and 
Your screen will now look like this, a ghosted Behaviours menu, and select Simple Rollover. This Preview In the browser from the File menu. 
version of what you just had on the screen. automatically selects the equivalent Image Slice You can combine these rollovers with any number 

Click on the first frame and then the Layers tab. from the following frame as its rollover image. of other functions, like the pop-up menus. FEES 
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Illustration: Rob Brearley [t] 07967 701 207 


The future of the Web 


We peer into the future to find out what 


we'll be designing in two years time 


ack in the dark ages of the 
Internet, all you needed to 
become a Web designer was 
good old Notepad and the 
patience required to sit down and learn 
all the tags. Now we've got capable, 
complex design packages like 
Dreamweaver, Flash sites, database- 
driven shopping carts and terms such as 
WAP to deal with. But, Flash aside, you 
still can get by hand-coding your pages 
in Notepad. How long will this last? 

Not long, judging by the pace of 
change in the online world. The UK may 
be lagging behind the rest of the world 
when it comes to high-speed Internet 
access, but once BT and the cable 
companies finally roll out broadband, it 
will change the Internet experience for 
millions of consumers. 

And that’s just the beginning. The way 
people interact with the Web is 
changing. It used to be that you had to 
have a computer to go online: now 
WebTV is here, and your client’s 
shopping site might be viewed by 


someone lying on their couch. Or sitting 
on the tube, looking at their mobile. 

It’s going to take time for people to 
start taking advantage of these new 
media. And the recent dotcom 
downturn has moved these 
technologies off the boiler for the time 
being. But as a Web designer, you 
should be exploring their potential right 
now. We'll take a quick run through the 
technologies and have a look at what 
they will mean to you, the designer. 


WAP is... 


There’s a word that rhymes with WAP 
that doesn't pay it any compliments. But 
many designers feel that’s just what 
Wireless Application Protocol is — a bit 
of a mess. You can't exactly blame them. 
Compared to the relative freedom of 
designing in HTML, this markup 
language is a straightjacket. 

Making pages small enough to be 
transmitted over the incredibly slow 
data connections of today’s mobiles and 


display on a 3-line black-and-white 
screen is a challenge enough. But 
actually getting them to do anything 
useful is even harder. Not only do 
different phones display pages 
differently, you’ve got to test your site on 
a range of WAP gateways, too. It’s no 
wonder the technology isn't getting the 
acceptance its promoters want. 

But there are a couple of good things 
about WAP. Because it’s a completely 
different format from HTML, it has 
forced many companies to take a hard 
look at how their data is stored. New 
formats are going to come and go over 
the next few years, and it’s essential 
that Websites can quickly and 
painlessly ‘repurpose’ (as it’s known in 
industry-speak) their content. 

Wireless communications are 
speeding up, too. We're already seeing 
the first trials of third generation (3G) 
mobile devices, and they should be on 
the market in 2002. In the meantime, a 
number of intermediate standards will 
have their short time in the sun. They'll 
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BT's ADSL rollout plans may have slipped, but 
broadband is still on the way. 
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probably spell the end of WAP: it was 
specifically designed for slow devices 
after all. But the lessons WAP has 
taught will continue to be valuable: you 
must be able to quickly create a version 
of your site for small screens and 
limited resources. 


Designing fora 

broadband world 

3G mobiles promise an ‘always on’ 
connection to the Internet fast enough 
to transmit video. That's a whopping 
2MB per second or more download 
speed: the equivalent to having a leased 
line running into the back of your 
phone, and more than land-based 
technologies such as ADSL or cable are 
capable of delivering at this time. 

With the current rollout of ADSL and 
cable crawling along at a snail’s pace, 
your first truly fast Internet connection 
may come through your phone. But in 
reality, it doesn't matter where it comes 
from, you will have to start designing 
your pages for the broadband world. 

Mostly, this brings unheard of 
freedom: you don't have to worry about 
the size of that home page: you can 
include all kinds of video and other 
streaming media on your site. 

But video, coupled with the Web, has 
incredible potential. Imagine watching a 
clip and being able to roll your mouse 
over objects in the video for more 
information. Click Tom Cruise's 
sunglasses and buy them immediately. 
Schedule your own news broadcasts 
that only give you the content you're 
interested in. 

The tools to do this are rapidly falling 
in price. Avid — creators of high-end 
production systems — recently released 
ePublisher, a cheap tool for creating 
sites that link HTML pages to the 
video's timeline. It's dead simple to use 
and creates passable pages with no 
coding. Up the scale a bit is Media 
100i, and complete toolkit for 
developing interactive video that 
doesn't cost much more than a decent 
Web page authoring suite. 


homevideohell.com 


But just having the tools isn’t enough. 
Designing video is a completely 
different skill set from laying out 
basically static pages. Just take a look at 
the number of terrible-looking, hard-to- 
navigate sites on the Web today. Imagine 
all these pumping out raw, unedited 
home video, and you’ll begin to wonder 
if this broadband business is worth it. 

The other downside is the expense of 
streaming video. Your viewers may have 
a whopping 4MB pipe to their ISP 


The news you want, delivered direct to your 
hand-held thanks to 3G wireless technology. 


capable of swallowing full-screen video 
whole. But if their ISP accesses the 
‘normal’ Web, the movie will still only 
trickle in at around 100K a second. The 
trouble is the Internet is choked with 
data already. 

Providers, such as BT, are already 
signing deals with networking 
companies that will supply an alternate 
‘backbone’ for its broadband content 
and coaxing big media providers such 
as Fox and Disney to fill their 
subscribers’ screens. If you're going to 
provide broadband video, you'll need to 
pay for a piece of one of these pipes. 

Prices may be falling, but in the next 
few years, it'll only be the largest 
corporate sites that take advantage of 
broadband with streaming video. 


Enter the telly 


Of course, full-screen video is nothing 
new. Television, after all, has been 
around for over half a century. But what 
if you could surf the Web from your TV? 
Of course, you already can. 

WebTV is a fine idea, and has the 
potential of attracting a huge new 
audience to your site. The problems is 
designing for the idiot box. Computer 
screens are designed to be read froma 
foot away. TVs are typically six or seven 
feet from the viewer, and are far lower 
resolution. And that’s just the start of 
your problems — see Designing for 
WebTV opposite. 

The bottom line is this: you need to 
create a whole new site for WebTV 
viewers. Like with WAP you'll be 
repurposing your content again. If your 
site is databased, this shouldn't be too 
much of a problem: just rejig your 
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Looking for some Flash fun? Try 
www.skipintro.com for an extreme example 
of the art of deterring visitors. 


templates, add a browser detection 
script that forwards the couch potatoes 
to their own version, and you're done. 

If you're still designing static pages, 
it’s time to stop. Sure, the word 
database is almost guaranteed to scare 
off anyone from a graphic arts 
background. But tools such as 
Dreamweaver UltraDev make the job of 
hooking up a database back end and 
developing an ASP (Active Server 
Pages) -based site simple: it handles all 
nasty code for you. If you’re a Flash 
fiend, take a look at Generator — it does 
much the same for Flash-driven sites. 

For those on a budget, there are 
completely free alternatives. PHP is the 
Open Source equivalent of Microsoft's 
proprietary ASR and creates some 
fantastic, complex and high-volume sites 
when coupled with a MySQL database. 


The X factor 


But all these databases are, in a sense, 
old hat. The latest buzz is all about 
eXtensible Markup Language. You'll be 
hard pressed to find a quick explanation 
of what it is, and if you do, you'll be 
snoring in no time. But it’s not all hype. 

XML itself is a framework that 
enables people to define their own tags 
to wrap their data in. HTML is (mostly) 
just one form of XML. Wireless Markup 
Language (WML), the language WAP 
pages are written in, is another. 
However, the real power of XML comes 
not from designing pages for display, 
but from the fact that computers can 
read and understand the pages. 

This is particularly important if 
you're designing pages for business-to- 
business sites. This sector is moving 
faster than any other towards a series of 
huge online exchanges focused on 
various markets. To offer your products 
or services in one of these exchanges, 
the exchange software has got to be 
able to send outa spider to your site 
and quickly glean your latest prices and 
details. That's where XML comes in: 
because it’s machine-readable, the 
spider can gather all the information it 
needs automatically. 


The WebTV viewer is an extremely useful 
tool for anyone whose developing sites 
for television. 


And it doesn't end there. When the 
purchase order arrives, it will come as an 
XML document. When you send out your 
confirmation, it too will be in XML and 
linked to the XML tracking database run 
by the company shipping your products. 

You don't need any special tools to 
write an XML page — good old Notepad 
will do, or they can be automatically 
pulled from a database back end. But 
you do need to be careful. XML is much 
stricter than HTML. Miss out one 
closing tag, and the whole lot comes 
tumbling down. 

To ease smaller businesses into the 
big bad world of XML, Softquad 
(www.softquad.com) has developed a 
product called MarketAgility that hooks 
into almost any existing program and 
converts it to a particular style of XML. 
Products such as this will considerably 
ease the poor designer's workload. 


Flash in the pan? 


Against a background of machine 
readable code, technologies that purely 
focus on presentation begin to look on 
thin ice. Flash produces some of the 
most graphically stunning sites today, but 
will it survive into the new millennium? 
Behind Flash’s wizardry are vector 
graphics: instead of mapping out which 
pixels are displayed, every line is broken 
down into a mathematical equation. This 
enables complex sites to fit into a tiny 


value in a broadband world. Flash sites 
also have problems of their own: they’re 
hard to register with search engines and 
individual sections can't be bookmarked. 

The most common use for Flash on 
the Web has been to produce a stunning 
splash page. But this in itself has led to 
a backlash from users sick of clicking 
the ‘skip intro’ button to get to the 
content they really want. Other Flash 
sites are guilty of ‘mystery navigation’, 
where a series of pretty, but ultimately 
meaningless, icons baffle visitors trying 
to find their way around. 

Flash solved a number of problems 
for Web designers, though. The pages 
look the same, no matter what browser 
or operating system you're using. You're 
not limited by the fonts that are 
installed on the viewers computer. 
Real, precise layout is possible. 

The fact remains, though, that Flash is 
a presentation tool. The Web will never 
be just about presentation: it’s about 
useful, easily accessible content, and 
increasingly that content must be 
accessible by all kinds of devices and 


busy building the tools designers will need to 


understandable by other computers. 
Flashisn't a good tool for this style of site. 


More markup 


Good old HTML is slowly curing the ills 
that designers have been plagued with for 
years. A new graphics format, Scalable 
Vector Graphics (itself a form of XML), 
promises to bring many of the advantages 
of Flashto regular Web pages. Style 
sheets enable designers to position 
elements and size fonts with precision. 

Soon embeddable fonts will become 
a reality, enabling users to see a page in 
the same font, whether they've got it 
installed or not. And for the first time, /E5 
and Netscape 6 largely support the same 
standards, enabling developers to write 
flashy scripts that work on both browsers. 
It’s not perfect, but it’s getting better. 

You'll find browsers becoming 
stricter about your HTML code, as it 
moves towards XHTML — the XML- 
compliant version of the language. But 
your design tools will keep pace, and 
whatever happens, some form of HTML 
will be around for a long time to come. 

One last thing is certain about 
designing in the future. You'll be 
learning new skills continuously. But 
that’s what being a new media designer 
is all about, after all. Enjoy it! Gama 


mobile users — but they're in for a treat when 
3G mobile devices make it to market. 
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space. But the compactness loses its take advantage of XML. 


If you haven't built a WebTV version of your site, it’s time to 
start thinking about it. According to webtv.net, over a million 
people worldwide surf the Net on their telly. They’re typically 
online over 40 hours a month, 70 per cent longer than 
computer surfers, but have very little Web experience. 

They're a market you can't afford to miss, but designing a 
site for them presents a number of challenges. 

To see what we mean, get up close to your TV. You'll be 
working with an effective resolution of 544x372 — that's 
smaller than a 15-inch monitor. Text will come out fuzzy, so to 
compensate, WebTV browsers display it larger, leaving still 
less room on your page. Add to that the problems someone 
lying on the couch with only a remote control for navigation 
will have with scroll bars, and you're stuck with designing 
many small, single-screen pages. 

It's safest to base your navigation on text, not images, for 
readability. But if you do decide to create a graphical 
navigation bar, make sure the buttons are big enough to be 
readable from across the room. Use the onMouseOver event to 
put helpful information into the status bar — it’s prominent on 
a WebTV screen, and will help viewers find their way around. 


White backgrounds are popular for Web sites, but cause all 
kinds of strange effects on a TV screens. White text on a dark 
background is a far better choice. And people surfing ona 
telly only have a few buttons on a remote control to work with. 

Avoid frames entirely — there’s not much point in them 
when you're designing single-screen pages anyway. And stick 
with bog-standard HTML code. Some WebTV browsers 
support special tags, but there’s no guarantee that next year’s 
browser will. Remember, you're not designing for Internet 
Explorer or Netscape, but a completely different beast. 

Client-side image maps are fine for navigation, but make 
sure your hot spots are rectangular for the most precise 
navigation possible. Server-side maps are out. 

If your site includes forms, keep them as simple as 
possible. Use drop-down menus, check boxes and radio 
buttons wherever possible: pecking out letters using the left 


and right buttons on your remote is no fun. At most, people 


will enter an email address, and then only if they really want to 


hear from you. 
Just because people are surfing from their TV, it doesn't 


mean their pages will load any faster, so page size still counts. 


Finally, just as with any other site, test your pages with 
every system you can get your hands on. You'll find a handy 
viewer program that will run on your PC (along with lots more 
design tips) at www.webtv.net, but there’s no substitute for 


the real thing. 
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Some companies such as wineplanet.co.uk are already using 
streaming video to sell. But are you up for creating the content? 
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Software info 

Dreamweaver 4 is available priced 
£269, (upgrade £116) and UltraDev 4 
for £469 (upgrade £116). The 
Dreamweaver 4/Fireworks Studio 
costs £410 and the UttraDev/ 
Fireworks4 Studio for £586. Contact 
020 83585857 or [w] macromedia. 
‘com for more details. You'll find a demo 
version of Dreamweaver/UltraDev on 
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. ne positive development 
} to have come out of the 
: e-commerce explosion of 
T the late 90s was the 
improvement in tools that enable you to 
connect databases to the Web. Using an 
external data-source to provide content 
for pages enables designers to 
concentrate on design and content 
developers to do what they do best. Still, 
content must be taken into consideration 
while creating such pages and learning 
how to build them from scratch increases 
the understanding required. 
Dreamweaver UltraDev 4 is aimed at 
designers who are crossing over to Web 
application development. Its cross- 
platform tools are powerful enough to help 


Dreamweaver UltraDev 4 


In this tutorial we show you how to connect a database to an 
existing page using Active Server Page scripting protocol 


build applications, whatever platform 
you're using. Although it helps to know a 
little about how databases work, ODBC 
functions, the SQL database scripting 
language and any of the scripting 
languages associated with Web application 
building, it’s not necessary with UltraDev 4 
as everything is menu driven. 

In this tutorial we connect a database 
to an existing page using MS Active 
Server Pages scripting protocol, although 
we could have chosen to use Cold Fusion 
or Jserver. To make sure the project 
works across platforms, we've included 
instructions on connecting to remote 
Web hosts at design time — an option 
unavailable in the previous versions 
of UltraDev. > 


Part 1: Setting up a dynamic site 
Whether developing on a local machine or making a remote 
connection to a server on the Net, stage one is to set your site up... 


Free ISPs 


You can find a list of free ISPs 
that support dynamic database 
powered ASP pages at 
www.aspfree.com/asp/ 
freeasphost.asp. 


DSNs 


ADSN (Data Source Name) sets 
up a networked path toa 
database. Using DSNs is 
preferable to constructing 
custom database paths and 
commands (called strings) in 
UltraDev as they're more 
portable and, ultimately, easier to 
work with. 


py Goto the root directory on your Web server, 


fH 'f you're working in Windows 95 or 98, you whether it's remote or local. If you're using 
must install Personal Web Server from your PWS on a local machine it should be at In the root directory, create a new folder called 
Windows CD before you start. If you're using aMac —-C:\Inetpub\wwwroot\. If you're using a remote ultradevsite. Look on the coverdisc for the 


you'll need to sign up with a remote hosting service hosting service you may have access to it via FTP or tutorial folder named ultradevtutorialsite. Inside is a 
that uses Windows 2000 or NT running Internet through a Web-based control panel. Check your folder called database. Copy or FTP this to the new 
Information Server with ODBC and ASP support. hosting services ‘help’ files for more details. ultradevsite folder on your Web server. 


Select Microsoft Access Driver from the list G If you're using a remote Web server instead, 
If you're using Windows and PWS, the next that appears, then click Finish. In the next you may not have direct access to the ODBC 
step is to go to Windows Control Panel (open dialog, give the Data Source the name PhobiaDB, Data Sources control panel, but been given the 
My Computer on the desktop to find it) and open then click on Select to browse for the database option to set up a DSN by request to the host's Web 
the ODBC Data Sources panel. Click on the System file phobia.mdb in the folder you copied over to Administrator or through a Web-based control panel. 
DSN tab and click on Add. your Web server. Check with your hosting service before proceeding. 


Copy the contents of the folder labelled 


ultradevtutorialsite in the tutorial directory on If your Web server is on a remote host, choose 
the coverdisc to the ultradevsite folder on your local FTP from the Access dropdown menu. Type in 
hard drive. Start U/traDev and go to Site>New Site. Click Remote Info. PWS users should select the URL you use to gain FTP access to the service in 
In the Local Info section give your Site the name Local/Network from the Access menu, then the FTP Host box, and ultradevsite as the host 
Phobia then browse for the folder you just copied to —_— browse to the ultradevsite folder located in directory. You may also have to type in your usual 
your hard drive. C:\Inetpub\wwwroot\. user name and password.Continued on page 39. > 
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A cross-platform Web application building 
environment with all of Dreamweaver’s design 
tools. UltraDev 4 is well worth the outlay. 


The new features and 
enhancements in 4 


Dreamweaver 4 is finally the all-round package it promised to 
be, with enhancements to the standard release and UltraDev 


reamweaver has been the 
choice for design-conscious 
Web designers since its first 
release, and the reasons are 
simple. The package offers an 
open workflow route coupled with true 
drag-and-drop capabilities — simple 
features that no other program seems to 
get quite right. Still, Dreamweaver 
critics have bemoaned the program's 
lack of direct script editing tools. This 
omission has been rectified over the 
course of the last two upgrades. Quick 
Tag editing was introduced in version 3 
and in version 4 we get an entirely new 
coding environment to play with. 


Code Cruncher 


The new Integrated Text Editor is 
accessible in Code View - an alternative 
to the standard Design View, and lets you 
enter HTML, or other scripts manually. It 
comes with its own toolbar, automatic 
colour coding, auto-indenting of nested 
commands and line numbering. 
Accessed in full- or split-screen mode, 
the changes made in the Text Editor are 
reflected live in the Design View. 

The full package still ships with 
Homesite on Windows or BBEdit on the 


\a§Meer Amsterdammers fietsen 
Het fietsbezit stijgt, vooral bij 
Amsterdammers van 18 jaar en ouder. 

fg Vergeleken met vijf jaar geleden wordt er 
ook meer gefietst. Ruim 40% van de 


Layout tables in Dreamweaver 4. Work with them a few times and you’ll be wondering what you did 


before they came along. 


Mac, but the extra packages are now 
superfluous... Dreamweaver now does a 
pretty good job with hand coding all on 
its own. 

These newly grafted work modes are 
augmented with a third option. ‘Layout 
View’ adds a simplicity to creating table 
based layouts that no other package can 
match. The tables you place are created 
dynamically, are easier to add new cells 
to and are far easier to resize. Spacer 
images can be generated within cells, 
you can add cells to a table simply by 
drawing them in place and auto- 
stretching capabilities adapt to different 
resolutions on request. Although close in 
intention to the revamped Layout Grids 
in Adobe GoLive 5, this is a far cleaner 
implementation of the idea, unique in 
modern Web design tools. 


Central Assets 


Long overdue, the Assets Panel 
incorporates features of the old Library 
panel and much more, enabling you 
access to scripts, templates, Library 
items, URLs, images, colour palettes and 
other media from one central place. 
Frequently used Assets can be marked 
as ‘Favourites so that you can find them 
easily and they can also be organised 
into sub-folders within the Assets Panel. 


Built-In Flash 


The level of integration with other 
Macromedia products isn't just confined 
to the revamped look and feel of 
Dreamweaver. Fireworks and Flash, if 
present on the user's system, can be 
launched from Dreamweaverto edit 
objects in place. In the case of Fireworks, 
the integration of that package’s Graphics 
Optimisation engine has been tweaked 
and renamed Roundtrip Graphics (to 
bring it into line with other Dreamweaver 
Roundtrip buzz phrases). Fireworks PNG 
format images can be directly imported 
into the package, and edited in place. 
More impressively, Dreamweaver 
now actually supports limited 
Shockwave Flash generation features, 
with a library of customisable SWF 
buttons and support for text based 


rollovers. With extended use, problems 
with Dreamweaver’s Flash buttons do 
begin to emerge though. You can't refer to 
relative URLs above the current folder in 
the hierarchy —an oversight that leaves 
you staring at the screen saying: “what?” 


UltraDev 


Dreamweaver UltraDev 4, the Web 
application design version of the 
authoring package, comes mere months 
after the release of the first edition. Many 
of those changes made in the interim are 
central to Dreamweaver, and have 
already been discussed. For example, the 
enhanced control over scripting with the 
new Text Editor, debugging and colour 
coding features make far more sense in 
the context of UltraDevs multi-scripting 
environment. With the capability to 
recognise whether you're working with 
ASR JSP and CFML, the Text Editor 
adjusts to your needs accordingly. 

There are improvements to the 
options for connecting to databases, with 
support for WebDAV for example, but 
UltraDev’s most commendable 
enhancement is the ability to connect to 
remote databases on the Web at design 
time. This enables you design using the 
actual application server your finished 
site will work on, whatever platform 
you're working from. This is good news 
for Mac-users, who get to create Cold 
Fusion and ASP pages direct from their 
own machines. 

Although Dreamweaver 4's upgrades 
appear at first sight to be more cosmetic 
than the huge overhaul that we saw in 
version 3, this is probably a friendlier 
update than its immediate predecessor. 
That so many of the features on show are 
aimed at crunching code and dealing 
with more than just HTML reflects 
Macromedia's position on the cutting 
edge of Web tool developers. This 
upgrade places Dreamweaverfirmly 
back in the middle ground without 
compromising any of the professional 
integrity hard-coded into previous 
releases. Meanwhile, Dreamweaver/ 
Ultradev 4. can now be seen as a serious 
contender in the area of middleware 
development. 


Part 1: Setting up a dynamic site continued... 


10 | Next select application server. Choose ASP 2.0 
as the server model, VBScript as the Scripting 
Language and .asp as the default extension for files. 
The access settings should be set to the same as 
those in the Remote Info section. 
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In the URL Prefix box, type in URL to the 
root folder of your site. If it's on Windows 

Personal Web Server you can type 

http://localhost/ultradevsite. If you're using a 


hosting service, you'll have to check to find out the 


domain name path to your Web space. 


12 Go back through each stage and double-check 
that you've followed the instructions correctly. 
Make sure you've used the correct case when 
typing in paths and URLs and that the DSN you've 
defined appears in the System DSN control panel. 


Part 2: Making a database connection 


The site's all configured and ready to rock. Now you have to set up U/traDev's Connection Preferences 


Preformatted code 


Database records need not only 
contain plain ASCII text. The can 
also contain preformatted HTML 
code that the dynamic page 
treats as though it were part of its 
existing code. 


Dynamic links 


You can place dynamic links to 
images in pages as a connection 
toa recordset containing an 
image URL, but you can't link 
directly to actual images 


Go to Modify>Connections in UltraDev. Click 
contained in databases. 


the New button and enter the name 
connPhobia for the connection. The convention of 
adding ‘conn’ before a connection name prevents 
confusion between databases and connections. 


Connection 


for Site ‘Phobia’ 


Select the PhobiaDB DSN from the Database 

Source Name dropdown. If the DSN isn't 
available, check back and make sure you've 
configured it correctly. If it's on a remote server, 
make sure your Net connection is active and Using 
DSN on Application Server is selected. 


3 Click on test to set up a diagnostic connection 
between UltraDev and the database. If the 
connection is unsuccessful, make sure you've entered 

any username and password information required. 


Part 3: Making the search page 


Creating forms in Dreamweaver UltraDev is easy with drag-and-drop 
items. Here we prepare a search form that will query our database 


Switch to the Site window in U/traDev, then 

double-click on the file search.html. Use the 
dropdown menu in the Objects toolbar to select 
Forms. Place the cursor in the large empty table cell 
and click on the Insert Form icon. 


Add four items to the menu using the plus 

sign. Type Octafish, GWF, All New Lucky Boys 
and in as the individual items. In the Values column, 
number the Octafish item 5, the next item 6, the 
next 7 and the last 8. > 


Click the Insert List/Menu icon to insert a drop 

down menu. With the menu selected, go to 
the Properties panel (choose Window>Properties if 
it’s not visible) and click on List Values. 
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4 | Before proceeding, name the menu ‘doMenu’ G Click on the red boundary lines in the 


in the Properties panel. Next, place a button document to make the form we're working The combination of the GET method with the 
on the form by choosing Insert Button from the with the focus of the Properties panel. Set the URL on the Action box places the results of the 
Objects toolbar. Change the button text to Search in —_ method of the form to GET. In the Action box, type users selection from the dropdown menu in a query 
the Properties panel. in ‘results.asp’. sent to the database enabled page. 


Part 4: Making the results page 


The search page creates the query, now we use U/traDev to create 
an ASP page that dynamically displays the results of that query 


Live Data View 


You can preview your Database 
powered results page by clicking 


rey will Diow your tir 


on the Live Data View option on 
the toolbar. Though you can work 
with this view active, we don't 
recommend it as it slows things 
down a lot. 


Multiple recordsets 


Our finished results page 
contains a second recordset that 
points to a separate table in the 
same database. Pages can 
contain references to multiple 
recordsets and even multiple 


databases if required. 


— - Use the dropdown menu to select 
Switch to the Site window and double-click on Open the Data Bindings panel by going to 3 | ‘connPhobia’ as the database connection. If it’s 
results.asp to edit the file. We've already Window>Data Bindings. Click on the plus sign not there, retrace your steps because you must have 
inserted some placeholder content. Your job is to to add a new Recordset. In the dialog that appears, | done something wrong earlier. Make sure your Net 
replace that with dynamic data commands. name the recordset Results. 


connection is active if you're using a remote server. 


ki 
4 | Select the table labelled Recordings from —_——_— — = 

the next menu. Choose Selected and use In the document, double-click on the ‘text G Select the table containing the database records 
Ctrl-clicking to select RecordingTitle, Format and title’ to select it. Select RecordingTitle from the and go to the Server Behaviours tab. Click on 
Year Released. Set the first filter box to Results recordset and click on Insert. The the plus icon and add a Repeat Region behaviour. 
RecordingArtistID and the last to read ‘'doMenu’. placeholder is replaced by the chosen database Choose All Record in the dialog. This makes the 
Click OK. The new recordset should appear in the record. Replace format with the Format record and table automatically expand to accommodate the 
Data Bindings panel. date with the YearReleased record. number of records returned. EEE) 
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Electronic Media Training 


Courses include: 

Flash, Dreamweaver, Fireworks, HTML, 
Javascript, Director, 

Marketing for web professionals 


Recent clients include: 

Guardian New Media, Online Magic, 
Saatchi and Saatchi, BBC Online 
and Dorling Kindersley. 


Contact Matt Knopp 

Tel: 020 7553 4470 

Fax: 020 7251 3130 

www. biblio-tech.net 

E-mail: matt@biblio-tech.net 
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30Mb Web Hosting Account only £29.99 pa 
200Mb Business Hosting @ £129 pa includes 

MySQL Database 

Secure Server - SSL 

CGI/ASP/PHP 

Frontpage 2000 extensions 

15 POP3 email accounts 

email forwarding 

Unlimited Bandwidth 

Media http protocol Streaming 


Web site Logging and statistics 


Domains from £4 pa/$6 pa 


inc. InterNIC/Registrar fees 


PU age WY WEES AY Ub eR. 4, 
’ 


. 


B® beight=60) ‘prpeae Stohy 
& 


Iustration: Neil Leslie [t] 020 7636 1064 (début art) [w] www.debutart.com 


30 Web Design Tips 


There are some things that every Web designer worth their fee 
should know. Here are 30 of the most important tips, tricks and 
unwritten rules that you should be using on a daily basis 


rames that don't scroll, 
i screens that don't navigate 
i anywhere, downloads that go 
if on forever, headache- 
inducing backgrounds — all Web no-no's 
but darn difficult to avoid. Browser 
difficulties, file sizes and other pixel 
conundrums seemed designed to trip up 
even the most experienced Web author. If 
your site’s going to attain a certain 


fi 


‘stickiness’ though, it’s as well to bear in 
mind a few crucial design factors — and 
these are often simpler than you might 
think. Basically it comes down to curbing 
any urges you might have to scatter dazzle 
graphics on every page at the expense of 
the user’s time, wrinkle lines and 


patience. From GIFs to icons to tables, you Expertise provided by Karl Hodge 
should find a few tips among this lot that [e] khodge@dial pipex.com 
[101484 845201 


will improve your site. > 
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Dreamweaver is praised for features that appeal to 
design-conscious Web builders. As sites become 
more complex and less static it pays to invest in 
professional level software. 


1. Poor navigation 


Even the best-looking sites with the most useful 
content can be spoiled by poor navigation. The 
problem takes a number of forms and it’s 
difficult to decide which is worst, the: ‘Where 
am |?’ dilemma or the: ‘I can't find anything’ 
phenomena. To avoid plunging users into a 
infinite if-then loop: 

: Divide your site into categories, and 
construct your navigation around that. If there 
are sub-categories, make that clear in the first 
‘category page’. 

* Clearly label pages so users know where they 
are. A popular way to do this is to display the 
information in a hierarchical way reflecting the 
structure of the site. “Contents>Car Parts>Air 
Filters”, for example. 

+ Make all the navigation options clear in 

the first proper page of your site. Use that 

page to highlight recently updated sections or 
popular bits. 


The Web is full of free graphics resources and 
www.clipartconnection.com is one of the easiest to 
find your way around. Beware though, the quality is 
very variable. 


* Keep a consistent navigation presence 
throughout the site so the user knows where to 
go to move between pages. Include a link back 
to the top of the hierarchy. 

If your site is large and deep, consider 
providing a ‘site map’; a simple text page with 
links to all the pages in your site. 

+ Make sure that navigation options are visible 
wherever the user is on the page. 


2. Working with frames 


There are few things worse on the Web than 
clicking on a link and finding that you're stuck in 
another site’s frame structure. Frames that 
should scroll but don't scroll because the 
builder accidentally turned that setting off, or 
sites that don't display properly because the 
frames have been hard coded for one 
resolution are variations on the same theme. 

If you must use frames, make sure that 
they’re set up to expand to different resolutions 
gracefully. Use percentages for the main 
content area and design the layout to fit with the 
lowest possible resolution (600x400 is good 
for reference purposes). Also make sure that 
any links within frames open in a new, blank 
window or a parent window. 


3. Background clutter 


Netscape introduced the ability to use tiled 
background images in Web pages a long time 
ago, and the capability has been abused ever 
since. Nine times out of ten, patterned 
backgrounds simply do not work - they reduce 
visibility and detract from the content of the 
rest of the page. Professional sites using 
background images take care to integrate them 
into the overall design of a site, often separating 
textual content using neutrally coloured tables. 
In the majority of cases, a clean background 
with clear type is preferable to patterns of any 
shape. Black text against a white background is 
the easiest combination of all to read. 


4. Long downloads 


Usability statistics show that unless users are 
given a clear indication that something is 


You may have a ninja machine boasting 256 MB RAM, 
twin monitors and a CPU running at 1,000 MHz. The 
majority of your audience are still browsing on entry- 
level PCs with the display set to 800x600. Optimise 
and compensate must be your watchwords at every 
stage of the design process. 


[~~ webmonkey = 


If you don't know how to do something, you can bet 
that the Webmonkey does. Head along to 
www.webmonkey.com for tutorials and tips. 


happening within ten seconds, they're going to 
hit the back button and take their business 
somewhere else. That's right: just ten seconds. 
Leaving your pages unoptimised is 
officially not a good idea. Make sure you go 
through this checklist before uploading any 
page to a site: 
* Look at your page layouts and decide 
whether all the images that are in there are 
absolutely necessary. 
- Reduce the file size of all images using 
an image processing package like Fireworks, 
ImageReady, Paint Shop Pro or an online 
resource like www.gifcruncher.com. 
Experiment with a reduced number of colours 
in GIF palettes. 
* Give images labels so that users can see what 
they're waiting for. 


5. Coloured backgrounds 


Use table cells with coloured backgrounds for 
headings, columns and so on instead of creating 
solid images. Large ‘banner’ style images can 
be reduced in size in a similar way by replacing 
solid blocks of colour with table cells. 


6. Unwanted bells and whistles 


Although Java was, and still is, a great idea in 
principle, in practice, its use has been sorely 
abused. Created as a cross platform 
programming language, most of its Web 
applications have been trivial at best. 

No page needs a real time clock, text 
scroller or live image manipulation applet. 
Java applets aren't the only extras that slow 
down the browsing experience unnecessarily. 
Long midi files that automatically trigger as 
soon as you open a page, huge animations 
that do nothing but loop away pointlessly ina 
corner and embedded files that require 
obscure plug-ins that no one has - none of 
these ‘bells and whistles’ add anything of value 
to your pages. 


7. Mirror image 


Reuse images throughout a site if possible. 
Once the user has downloaded them once, the 
file will be loaded directly from the browser 
cache on their hard drive the next time around, 
cutting valuable seconds off load times. 


8. Audio fil 

Like image files, try to keep the size of audio 
file sizes to a minimum. You can do this by 
reducing the quality of the file to around 11KHz. 
If you start with a good source file (16 bits, 
44—48KHz) you shouldn't hear too much 
degradation in quality. 

Larger files of anything over 20 or 30 
seconds, should be converted into a format 
with more aggressive compression, like 
MPEG3 or RealAudio. 


9. ( 
The worst kind of Web design is over-design. 
With modern drag-and-drop tools it’s far too 
easy to create great-looking, graphically- 
intense sites that run brilliantly from the hard 
drive of your dual processor G4 Power Mac and 
eschew basics like clear navigation. 

Here's a tip for budding post-grad Web 
designers: go to Jakob Nielsen's site about 
interface design and usability at 
www.useit.com. Read the articles there about 
constructing navigation and designing site flow. 
Some of the tips may seem a little draconian, 
but the basics are all good. Keep the eclectic- 
looking stuff for your portfolio. 


Usability surveys confirm again and again that 
people don't like scrolling. Ideally you should 
aim to get one page to fit into one screen's 
worth of space. 

If you can't do that, the maximum size you 
should use is around two screens worth: that’s 
roughly equivalent to an A4 sheet of paper — 
the standard size your printer takes, or 
600x850 pixels. Make sure that any navigation 
options you offer are at the top and the bottom 
of the page. 


11. Uneve: 
Try to take advantage of modern drag-and-drop 
table building techniques available in GoLive 
and Dreamweaver that let you create tables 
with uneven numbers of cells. 

Anew feature in Dreamweaver 4 lets 
you remove nesting from tables. Select the 
outer table of the set of nested tables you want 
to alter, then click on the ‘Remove Nesting’ 
button on the Properties Panel. Any cells 


—aS 
useit.com: Jakob Nielsen's Website 
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Web usability guru, Jakob Neilsen, writes regular 
articles about the finer points of interface design. 
Check them out at www.useit.com/alertbox/. 


belonging to the nested table (s) become part 
of the new table. 


You will probably have come across sites that 
say: This site is best viewed at 1,280x1,024 
pixels’ across the bottom. There can only be 
one excuse for this practice: incompetence. 
HTML was designed so that document 
dimensions would alter to fit the resolution 
they're being browsed at. If your sites don't do 
that, you're not building them properly. 

A more frustrating trend, mainly among 
e-commerce sites, are pages optimised for one 
browser on one platform (usually Internet 
Explorer on Windows). 

This can mean you're excluded from 
interacting with the site, which in turn means 
they're losing potential customers. 

It is possible to write cross-platform, 
cross-browser code in the majority of 
circumstances. With tools like Dreamweaver 
UltraDev offering cross-platform authoring 
there's no excuse even if you’re building 
Web applications. 


If you've any training in colour theory, you'll 
know that it’s easy to go overboard with 
colour clashes. For Websites, try to pick two 
colours that go well together — use a 
further shade of each one, then stick to that 
scheme as much as possible throughout. 

This may sound horribly restrictive, but it 
works a lot better than randomly choosing 
colour schemes for different pages. Text should 
be black or, if the background is very dark, 
white. Look at the colour schemes used on 
commercial sites for ideas too. 


Light blue text on a light green background? There can be few worse examples of a poor choice of colour scheme. 
Unless it’s yellow on white, navy on black, purple on pink... 


If you want to include sound in your pages, check out 
www.real.com to download tools for converting 
standard audio to streaming RealAudio. 


14. Ca 


Don't be tented to go exsdsoard when nesting 
tables: a main table composed of one or two 
cells with a further single table nested within 
each is sufficient for most layouts. 

The real advantage with nested tables is that 
you can control the orientation of cells — you're 
not stuck with a set number of rows or columns. 
This is handy for dividing different types of 
content within a page, or mimicking the 
column-by-column style of DTP. 


1p. ess everything 

It isn't just image and animation files that need 
to be as small as possible: your HTML needs to 
be clean and lean too. Before delivering your 
files to the Web, make sure you remove: 

- Empty tags. WYSIWYG tools have a habit of 
leaving alignment and formatting tabs 
throughout your code. Keep an eye out for 
content-free <P> and <CENTER> tags. 

- Repeated tags. Tags that require multiple 
parameters often get this treatment, the 
<FONT> tag in particular. You'll need to edit 
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ForkinTheHead.com is an awards site with a 
difference. They give out awards to the worst Websites, 
explaining exactly what the authors have done wrong. 
Worth a visit so you know what pitfalls to avoid. 
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9 It's been » quiet week! 
ots bean » quiet week! 


9 Ws been 3 quiet week! 


Going live without content sends out the wrong signals 
to potential users. But even commercial sites make 
this basic error over and over again. 


them so that all the parameters are contained 
within the same opening tag and delete any 
extra closing tags. 

* Mystery code. Some visual tools, especially 
the earlier ones, insert code that’s meant for the 
authoring package rather than the Web. Bin any 
lines that aren't meant to be there. 


16. Make pages sticky 

Use navigation to keep visitors on your site. We 
don’t mean prevent them from leaving, just 
make any external links point to a new blank 
window. That way your site stays open behind 
the new window and users will stay there longer. 


17. Wired for sound 

If you embed short sounds which you intend to 
autoplay (using the ‘EMBED’ tag), use Windows 
.wav format. Most machines on the Web are 
running Windows, while QuickTime will handle 
the format on the Mac. To provide users with a 
way to turn off embedded sounds, make sure 
the parameter ‘HIDDEN is set to ‘false’. 


18. Hold the front page 


The front page of your site is its most important 


The individual elements of a Website, from pages 
down to embedded images, soon begin to form a 
convoluted network of interrelated links. Adobe 
GoLive's site management tools help you keep 
everything organised and in its place. 


50 Megabytes of free Webspace, free counters, chat 
facilities and guestbooks, sites like www.tripod.com 
are the ideal place to set up an online portfolio if 

you're trying to break in to professional Web design. 


component. Once it’s published, visiting users 
will need to be able to get a sense of what your 
site is about and how valuable it’s going to be to 
them within moments of it appearing on screen. 
The basic tenets are similar to designing for 
print. The opening page should be prominently 
branded so readers know where they are, it 
should offer a clear way to get to the content 
quickly and it should explain what that content 
is like. And remember, Flash splash pages may 
look good locally, but you need to make an 
impact quickly so keep the file size small. 


19. Combine your assets 


Store anything you use in multiple projects, 
frequently used graphics, snippets of code, 
logos and so on, ina single assets folder to 
make them easy to find. Though they'll need to 
be copied over when you include bits like this 
in a new site, most drag-and-drop authoring 
tools will prompt you before moving media to 
the appropriate site folder. Dreamweaver 4 
even sorts it into categories for you. 


20. Not updating 

You shouldn't need to constantly tweak and 
update your site unless you're providing a 
regular news service, but you should regularly 
add new content to the site, check that external 
links are working and freshen up the look of the 
place a bit. If building sites for a client, ensure 
that this service is built into the contract. Sites 
that don't change lose users quickly. You should 
also make an effort to publicise the changes 
you make in a prominent section of the site. 


The World Wide Web Consortium at www.www.org is 
responsible for making official recommendations on 
Web standards and for outlining what you can and can’t 
do with HTML. Try to stick with its advice and your 
pages should work for everyone. 


Welcome to the largest directory of 
Web building resources on the internet! 
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The Reallybig.com network is a collection of free sites 
specialising in helping out budding Web designers with 
content, tutorials and more. Lots of links to lots of links. 


21. Under construction 

Websites never seem to be quite finished. 
There's always some bit of content waiting to be 
uploaded; a page here, a whole section there. 
Why should your users have to know though? 
Don't flag up your own laziness by putting up 
‘Under Construction’ or ‘Coming Soon signs. 
This same advice applies to dead navigation 
links; buttons that lead to pages that aren't there 
yet. If there are unfinished sections of your site, 
don't include them in your navigation structure 
at all. Better still, if your site is unfinished, don’t 
upload it until it is. 


22. Wrong tools for the job 


Almost every package on the market has the 
capability to save files out as Web pages these 
days. Your word processor can do it, most 
graphics packages can. Even spread-sheet 
programs want to be Web authoring tools. Our 
advice is, if your software isn't specifically 
meant for making Web pages, don't use it to 
make Web pages. Text editors like Windows 
Notepad and SimpleText on the Mac for 
manually editing code are the only exceptions 
to this rule. 


23. Spelling 


Text that’s full of rudimentary spelling errors 
looks unprofessional. At the very least, run the 
content of your site through a spell checker 
before posting it to the Web. Most modern 
Web editing programs have them built in. Use a 
word processor if your authoring package 
doesn't do it. It also helps if you get the second 
opinion of a literate friend. They can check the 
content of your site for typos, spelling errors 
and poor grammar. 


24. inconsistent design 


Having lots of good ideas is one thing, trying to 
pack them all into one site is quite another. Try 
to keep a consistent look and feel running 
through your site. Although you may want to 
experiment with subtle changes in colour 
scheme to give users navigation cues, you don't 
want users to think that they're stumbling from 
one site to another. Using templates will help 
you out in this department. An acceptable 


structure is to open with a contents page, then 
move to a standard design for the remaining 
pages within your site. If you can't stick with this 
throughout (if content dictates otherwise), at 
least make sure that your navigation aids are in 
the same location on every page. 


Every Web designer knows that tables are 
handy for laying out the content of a Web page. 
They enable you to control the look of a page 
without it being resolution dependent and they 
work in older browsers. Although tables were 
added to HTML as a method of displaying data 
in a spread-sheet style format, their ability to 
hold any page element within a cell soon saw 
them press ganged into service as a positioning 
tool. The problem is, the more complicated a 
table is, the longer it takes your browser to 
render it. Your browser doesn't ‘draw’ tables 
until all the content within has been 
downloaded. Unfortunately, some folk don’t 
realise this and will quite happily place the 
entire content of their page in one huge table 
that takes ages to appear. Don't do it. 


26. Slice and d 

It's gradually become the ‘norm’ to use a 
bitmap-editing package to design entire Web 
pages, then cut the image into chunks and 
reassemble it using HTML tables for the final 
result. Two possible problems emerge when you 
use the graphics package to output the final 
HTML. The code can be messy and 


The words ‘Home Page’ strike terror into the hearts of 
every self-respecting Web designer. Don't be tempted 
by the naff picture and ‘I'm so whacky, me’ template... 


This is what happens when you tile a psychedelic background under the content of your page. Not pretty, is it? 


unnecessary blank images are often generated. 
If you build tables yourself in a proper Web 
authoring tool, you can get rid of both these 
problems in one go. In Dreamweaver 4 and 
GoLive, the ability to convert Layout Tables and 
Grids to standard tables makes this even easier. 


27. Mystery buttons 


Anicon is an image that represents an action or 
a thing. The best icons shouldn't need any 
additional explaining, their appearance should 
be enough for you to know what their purpose 
is. A sub-category of icons have become 
recognisable through repeated use. They may 
not look like the Actions they describe, but 
through silent agreement that’s what they've 
come to represent. The third category are 
‘mystery buttons’, icons that don't resemble 
anything, buttons without labels, even Image 
Maps that don't draw attention to the fact that 
they're part of the navigation system. There's a 
lot of this about. Keep icons simple, but try to 
stick to universally recognised symbols. If that 
doesn't work, then put text labels on them or at 
least use the ‘ALT’ attribute of the ‘IMG’ tag to 
attach an informative tool-tip to the button. 


28. Give ace 


The oldest tip in the book, still largely ignored 
by many designers, still works well even in 


these days of exact position with CSS and Flash 


supremacy. Create a single pixel transparent 
graphic in your favourite editing package and 
name it ‘spacergif’. That little image can be 
your best friend when you use it to make sure 
that blank table cells don't collapse in legacy 
browsers, stop text from butting up to margins 
and adjust the positioning of just about any 
element. Simply place the image where it’s 
needed and change the height and width 
dimensions in your authoring tool. 


Make sure you use the right graphic format for 
the right purpose, as these two widely accepted 
standards can bloat out when used for the 
wrong kind of image. GIFs, with their limited 
palette of up to 256 colours are lousy for 


GIF Wizard reduces GiFs, JPGs and 
BMPs up to 90% without Sacrificing 
and compress in one integrated online 
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« Decrease load time S 


« Eliminate broken links 


« increase traffic Amazon com could | 
« increase sales and profits save hundreds of 
|| dotlars a month by 
using GIF Wizard to 
fix this one graphic. 


© Image Editor WJavaScript enabled) © Compress Images 


Squash Web graphics down to size with the free online 
compression service at www.gifwizard.com. 


complex graphics but great for simple buttons, 
logos and images with large areas of flat colour. 
JPEGs can store millions of colours, but they 
use a very strong compression algorithm to cut 
down on file sizes which can distort images — 
that’s why they’re best used on photographs or 
graphics where there are a lot of colour 
transitions to ‘hide’ this distortion. 


30. Just vit together 


Websites can be become very complex, very 
quickly, so it’s important to plan ahead and 
organise your resources before you begin. This 
means not only working out how your site is 
arranged in navigation terms, but how you 
organise the directory structure your site is 
stored in and even the naming conventions of 
pages. This is particularly important if you plan 
to update your site frequently. FEES 


Modus Operandi 


sinatus Multimediumae 


People don't usually spend very long on a page if 
there’s not much for them to do. Making them wait ages 
for a splash page to download is the easiest way to get 
them to click on to another site. 
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Expertise provided by Frank Bartucca, 

{e] madfrank@bartucca.dircon.ce.uk, Flash 5 
for Mac/PC is available priced £259, [t] 020 
8200 8282 or [w]www.macromedia.com/flash 
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Drawing and 
animating a logo 


Flash enables you to construct animated logos 
with ease. We'll show you the basics, then it's up 
we and your imagination to take it further 


lash’s intuitive drawing tools 
enable you to create logos 
directly within the program. 
Not having to use another 
vector-based drawing program to 
construct your ideas gives you greater 
flexibility and can save time. 

We are going to draw a simple logo 
using basic drawing techniques, then 
add animation to the logo to make it more 
dynamic and effective. 

It's worth thinking about how the 
different elements will interact, so that 
each part of the logo can be placed ona 


separate layer. Once the logo is complete, 


the animation is created by working 


backwards, so at the end of the animation, 


the logo appears in its original state. We 
will mainly be using motion tweening to 
animate the logo, with some of the 
elements converted to symbols to allow for 
colour effects to take place. 

We will then add a loop at the end, so 
that part of the logo continues to animate 
as the rest of the logo remains static. 

We will also modify the kerning of the 
text to create tidier typography. The result 
will also be a more professional-looking 
logo, something that’s imperative when you 
consider that the logo will be viewed 
constantly on a Website. Of course, once 
the logo has been drawn in Flash, it can 
also be saved as a static image to be used 
on printed media. 
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Illustration: Frank Bartucca [t] 01761233324 [e] madfrank@bartuccadircon.co.uk 


Part 1: Drawing the logo 


Here we will use basic drawing techniques and type to create our logo 


Rounded corners 


Press the Up and Down 


arrows while drawing a rectangle 


to change the size of 


rounded corners. 


Ink Bottle 


Use this tool to change the 


attributes of lines once they have 
been drawn. 
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Begin by designing your logo on paper. Then, 2 | Select Modify/Movie to bring up the Movie 3 | Now we will start drawing our logo. Select the 

work out how the animation is going to run. Properties dialog box. The default settings are Rectangle tool and set the Line Colour to None 
The first thing is to recreate the logo in Flash, then fine for this project, so leave the Frame Rate set to and the Fill Colour to Black. Then draw a rectangle 
add the animation to the various elements. 12fps and the Dimensions at 640 pixelsx480 pixels. across the Stage. 
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— — a Add a new layer called HYPNO and select the 
genes: Now select the Pencil tool with the Mode set 5 | Add a new layer and select the Oval tool with Text tool. Choose a heavy font (we've used 
to Ink and draw a wavy line to intersect the a Line Thickness of 8. Draw a circle by holding Akzidenz Grotesk) and type in HYPN on the left of 


rectangle. Ctrl/Command-click on the upper down Shift and a smaller circle filled with black. the circles in 48pt type. Adjust the kerning by 
segment and press Delete. You can use a different Press Ctrl/Command+K to bring up the Align dialog _clicking in-between letters and holding down 
colour to make the line visible, then delete the line box and align the Vertical and Horizontal centres. Alt+Ctrl/Option+Command while pressing the left 
afterwards. Name this layer, Island. Name this layer Sun. or right arrow keys. 
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@ Now type in THERAPY on the other side in a = . — . Now click on the Add Guide Layer button 
lighter font on a new layer. Call this layer a * Add anew witaer called aasiees and ie in ne underneath the Layer Names. Draw vertical 
THERAPY. Shift-Select the two words and press words MAGIC and ISLAND in separate text lines down the left and right sides and a horizontal 
Ctrl/Command+K to align the words horizontally to boxes in the same size and style as HYPN and line under the island in red. Use these to align the 
the baseline. Adjust the kerning in the same way as THERAPY. Then add @ THE ina smaller font. Again, | MAGIC ISLAND text to the words above. Click 
you did in step 6. adjust the kerning where necessary. under the Eye icon to hide the Guide layer. > 
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Part 2: Animating the logo 


We will use tweening to animate the logo between frames 


Convert to Symbol 


Objects need to be converted to 
symbols to create Fades or other 
Colour effects during animation. 


Tweening 


Tweening works by calculating 
the changes taking place 
in-between two keyframes. An 
object is drawn on a keyframe, 
then another keyframe is placed 
further along the timeline. The 
object is altered in some way on 
the second keyframe, then the 
Tween command is applied. All 
the intermediate frames are 
adjusted to give a smooth 
transition from the first keyframe 
to the second. 
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Assuming that the animation is going to run 

for 10 seconds, first click on frame 120 in the 
timeline and drag vertically to select all the layers. 
Then select Insert/Keyframe or press F6. Now we'll 
animate each element in turn. 


the Arrow tool. Choose Insert/Convert to Symbol 
with Behaviour on Graphic. Move the Playhead to 
frame 24 and insert a keyframe by pressing F6. 


2 | The Island is going to fade in first, so move the 
Playhead to Frame 1 and select the Island with 


Next, the Sun will rise over the Island. Click on 
Frame 1 of the Sun layer and drag it to frame 
24. Then insert a keyframe at frame 48. Click on 
frame 24 and drag the Sun diagonally down to the 
word ISLAND. The sunrise now starts on frame 24. 
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Now we are going to fade in the @THE 

MAGIC ISLAND text by using the white 
rectangle we drew earlier. Move the rectangle layer 
above the MAGIC layer and insert a keyframe at 
frame 72. Then convert the white rectangle to a 
Symbol by pressing F8 and giving it a name in the 
Symbol Properties box. 


Control-click on frame 24 of the Sun layer and 

choose Properties from the pop-up menu. 
Select Shape under the Tweening tab and drag the 
Easing slider to Out=100. This slows the Sun down 
as it reaches frame 48. Add a new layer above this 
one and draw a white rectangle under the Island to 
cover the MAGIC ISLAND text. 


8 | On the same layer, insert a keyframe at frame 
86. Select frame 86, press Ctrl/Command+l to 
bring up the Instance Properties box and set the 
Alpha to 0 per cent under the Colour Effect tab. 
Control-click on frame 72 to bring up the pop-up 
menu and choose Create Motion Tween. 


With the Playhead on frame 1, double-click on 

the Island to bring up the Instance Properties 
dialog box. Set the Alpha to 0 per cent under the 
Colour Effect tab. Now double-click on frame 1 to 
bring up the Frame Properties dialog box, click on 
the Tweening tab and select Motion. Press OK. This 
has created a two second fade in. 


6 | Select frame 1 on the HYPNO layer and press 
F7 to insert a blank keyframe. Then drag frame 
2 to frame 48. Insert another keyframe at frame 60, 
then click on frame 48 and Shift-drag the word out 
to the left of the stage. In the Frame Properties 
dialog box, select Motion Tweening with Easing set 
to In=-100. Repeat this process for the THERAPY 
text, starting at frame 60 to 72, dragging it out to 
the right. 


Now is a good time to test that the animation 

is running smoothly. Choose Control/Test 
Movie to view a looped version of the movie so far. 
Choose the Controller in the Window dropdown 
menu for manual control over the movie. 


Part 3: Finishing touches 


Now we are going to add a ripple effect and radiating circles around the sun 


Editing tweening 


The start and end keyframes of 
atweened animation can be 
altered and Flash will recalculate 
the tween automatically. 

Note that only keyframes can 

be altered. 


Colouring lines 


To colour a line with a Gradient 
fill, select the line and choose 
Modify/Curves/Lines to Fills. 


frame 86. Then select the Oval tool and draw 
a circle with a 2-point line and No Fill around the 
smaller circle of the sun. 


Double-click on frame 86 to bring up the 

Frame Properties dialog box and select the 
Tweening tab. Set the Tweening to Motion and the 
Easing to Out=100. Click OK. 


Select the new circle and choose 

Insert/Convert to Symbol and name it. Make 
sure the Behaviour is set to Graphic in the Symbol 
Properties dialog box. 


Select frame 120 and insert a keyframe. 

Then select the circle and choose 
Window/Inspectors/Transform. Type in 600 per 
cent in the Scale text box. Double-click on the 
circle to bring up the Instance Properties dialog box 
and set the Alpha to 20 per cent under the Colour 
Effect tab. 


Add a new layer and insert a keyframe at 

frame 86. Select the Pencil tool and draw a 
4-point horizontal black line under the MAGIC 
ISLAND words. Copy this and choose Edit/Paste in 
place, then move the duplicate line down a little 
while holding Shift. 


Teac ie oe 


G Convert the two lines to a Graphic Symbol, 
then select frame 120 on this layer and insert a 
keyframe. Choose Modify/Transform/Scale and 
push one of the side points in to reduce the size and 
move the lines to beneath the @THE text. Click off 
the lines to set the transformation. 
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With the Playhead at frame 120, choose 

Modify/Instance and set the Alpha to 0 under 
the Colour Effect tab. Then select frame 86 and 
choose Modify/Frame to set the Tweening to 
Motion and the Easing to Out=+100. 


asy 


8 | Now, select frame 120 and double-click on the 
frame to bring the Frame Properties box up. 
Choose the Actions tab and select Go To from the 
‘+ button’ dropdown menu. Type in 86 in the 
Frame Number text box and check the Control box 
to continue play. 
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9 | The last step has created a loop from frame 86, 
so the circles and lines will continue to animate 
while the rest of the logo remains static. Now test 
the movie again (Ctrl/Command+Return) and 
export via File/Export Movie. EES 
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Writing for Netscape 6 


The latest version of Netscape gives developers their first 
chance to write cross-browser pages. We dig into the 
DOM and some of the trickier new functions 


ack in the mists of Internet 
time, people used to stick up 
for Netscape. The David to 
Microsoft's Goliath, it led the 
way in bringing Web developers new, 
useful features. But the speed of the 
browser race took its toll. 

The early versions of Netscape 4 
were rushed out too soon and were 
unforgivably buggy. At its core 
Navigator 4, rana clunky layout engine 
- the part responsible for actually 


drawing the Web page on screen. You 
couldn't, for instance, resize your 
browser window without the layout 
engine reloading the entire page. Both 
sides claimed to be supporting 
standards but, as any developer knew, 
both lied. 

Then Internet Explorer 4 introduced 
features that enabled Web authors to 
access and change almost any part of 
their page using JavaScript, through a 
set of rules known as the Document 


Object Model, or DOM. Developers 
loved it. IE also came bundled with 
Windows ~ a sin for which Microsoft is 
still being dragged through the courts - 
and the race was theirs. 

Later versions of Navigator 4 fixed 
most of the bugs, but it was still 
burdened with a terrible layout engine 
and inadequate DOM. Surfers voted 
with their mice - less than 20 per cent 
of Internet users today are viewing 
pages through Netscape. 


If you use Macromedia's Show/Hide Layer 
extension, you'll find it’s broken in NS6. Get 
the fix from www.projectseven.com. 


Enter the lizard 


The developers at Netscape saw 

the problem coming nigh on three 
years ago. Their reaction was radical. 
They created a project called Mozilla 
to rewrite their browser from the 
ground up. 

Mozilla would be Open Source: 
anyone could download the source 
code, make the fixes they needed, 
and send them back for everyone's 
benefit. Anyone could incorporate bits 
of the browser into their own software 
and they wouldn't have to pay a penny 
in royalties. 

Some say the project was a failure. 
Unlike Open Source developments 
such as Linux, Mozilla failed to attract - 
and even, it’s rumoured, drove away - 
talented programmers from around the 
world. The work progressed at a snail’s 
pace, and by the time Netscape finally 
decided to release a browser based on 
Mozilla last November, many Web 
developers had already written the 
whole thing off. 

It would take a clearer crystal ball 
than exists on earth to tell whether this 
version will reverse Netscape’s decline 
in popularity as a desktop browser. It 
hardly matters. Netscape’s nay-sayers 
are wrong, for two simple reasons. 

Browsers are showing up in all kinds 
of devices these days, from televisions 
to handhelds. At its core, Netscape runs 
a lean, mean layout engine, 
affectionately known as Gecko. 

Anyone developing one of these 
new products would be mad to write 
a browser from the ground up when 
they could use an excellent engine 
for nothing. 

And the one thing that united the 
Mozilla team was a fanatical 
determination to stick to the Document 
Object Model outlined by the Web 
standards body, the World Wide Web 
Consortium, or W3C. 

At last we can access every image, 
anchor, layer or style sheet style sheet 
onthe page through JavaScript (or 
ECMAScript, as it’s more correctly 
known these days). 


Cross-browser code 


Standards compliance has been 
claimed, disputed and disparaged by 
many in the five years (yes, five!) since 
the W3C first started work on its 
DOM-1 specification. It’s tempting to 
bin the whole idea, and stick to writing 
your pages for a single brand of 
browser. Don't. 

With almost no fanfare, Microsoft 
has also been edging closer to the 
standard. IE5 and higher support a large 
chunk of DOM-1, and some of DOM-2 
(see the DOM and DOMer box). 

Although you'll struggle to find 
documentation on the new functions, 
it’s finally possible to write 
cross-browser dynamic HTML. If you've 
cursed the workarounds necessary to 


Even some of the most popular sites on the 
Net aren’t NS6 ready. Check the JavaScript 
Console to see what they're doing wrong. 


How to change your code to take advantage of the DOM. You'll find examples of using 
the following code on the CD 


MI 


Adapted from http://sites.netscape.net/ekrockhome/standards.htm| 


Internet Explorer 4 NS6 &IE5 


: 


i 


HH 


| 


document.all.tags(‘a’) 
document.all(‘name’) 


get your pages displaying the same way 
in IE and Netscape, you'll know this is 
an immense leap forward. 

You're going to have to learn a few 
new tricks, but we'll get you started in 
the next few pages. 

And once you've made the transition, 
you'll find you've inadvertently picked 
up all the skills necessary for 
manipulating the much hallowed, little 


understood XML. > Not everything on glish.com works in NS6, but 


the dynamic menu is worth copying. 


[Select = method or property a 


x.appendchildcy) 
Make node y the fast child of node x 


conn 


x.appendData(’ some extra text!) 
Appends the string some extra text to x, which must be a text node 


Supported only on 
Windows: 


x.applyElement(y ) | 


Make node x a child of node y 


= a = 


Find out which browsers support which parts of the W3C DOM-| specification at 
www.xs4all.nl/~ppk/js/. 
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Object Propertie 


With careful scripting (see the Cross browser boxout), it's possible to produce dynamic pages that 


work across browsers versions four, five and six. 


Other browsers and the DOM 


There's probably around a dozen different 


brands of browsers out there, from 


text-only ones such as Lynxto the W3C's _ 


own Amaya. Supporting them all is a 
nightmare, so it's important to have pages 
that will display no matter what's viewing 
them. But there are two relatively popular 
‘ones worth looking at that claim some 
DOM support. 

Opera 5. This Norwegian browser has 
recently gone ‘free’ (it's supported by 
DOM support. Be warned, next to nothing 
actually works DOM-wise, and much as | 


like the fast little thing, it’s easiest to leave 
it shut in the ‘everything else’ doghouse for 
the time being. 
Konqueror. This browser/file manager 
appears on many recent Linux systems. Its 
DOM support is patchy, but better than 
Opera's. If lots of Linux-heads visit your 
site, it’s worth considering supporting it. 
Testing for these browsers can be 


difficult. Opera in particular shows up as IE 


in many browser detection scripts. It's far 
more reliable to test for the feature you 
want to use than rely on browser sniffers — 
you find examples of doing this on the CD. 


reatrg code that ie ty 
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Try the Taboca Handwriter at 
www.taboca.com - a JavaScript only 
appliance that spits out squiggly lettering. 
Then view source to see how it’s done. 


A parting curse 

Before you start, get ready for one final 
gnash of the teeth at Netscape. In 
rigorously sticking to standards, they've 
thrown out all the non-compliant parts 
of Navigator 4. And they used to say 
there weren't any! Some of the effects 
you've laboured over achieving won't 
display properly in NS6. 

The biggest change is the loss of the 
<LAYER> and <ILAYER> tags. If your 
code relies on them (and some of the 
more fancy Dreamweaver extensions 
produce code that does), you'll need to 
change it. Similarly, if you use 
document.layer[] in your JavaScript, it 
won't work in NS6. 

Ata minimum you must update your 
browser sniffing scripts. There are now 
at least four browsers to account for: IE4, 
NN4, reasonably DOM-compliant 
browsers like NS6 and IE5, and 
everything else. 

Our instinct is to simplify things and 
lump NN4 into the ‘everything else’ 
category. Sure, the remaining Netscape 
users are hardly upgrading in droves, 
but once they realise they’re losing out, 
they will. IE users seem far more willing 
to upgrade - version five has been out 
longer, plugged enormous security 
holes, and ships with the latest versions 
of Windows - so you could consider 
feeding IE4 users the nicely degraded 
version of your pages too. 


Want to let your viewers add your site's 
content to their NS6 sidebar? 
http://developer.netscape.com/docs/manu 
als/browser/sidebar tells you how it's done. 


If you use Macromedia's Show/Hide Layer 
extension, you'll find it’s broken in NS6. Get 
the fix from www.projectseven.com. 


But there are other browsers out there 
too (see the Other browsers box). A 
better approach is to sniff to see if 
whatever's looking at your pages 
supports what you want to do. You'll find 
examples of this on the cover CD. 

If it’s essential that your cool 
JavaScript effects work in all browsers, 
take a look at Shelley Powers’ Getting 
Ready for Navigator 5 DHTML from the 
Links box. She shows how to create 
browser-specific scripting objects to 
handle all the incompatibilities. 
Admirable though her code is, you 
might wince when your pages contain 
more workaround JavaScript than 
content. And no matter how hard you 
try, some browser will always come 
along and gag on it, too. 

The final call on what to support is 
yours. Bug your host for access to the 
server logs for your sites and find out 
what your viewers are using, then base 
your decision on the numbers. If you 
decide to drop support for old browsers, 
consider presenting NN4 users with a 
little link reading — something like ‘For 
an enhanced view of these pages, 
upgrade to Netscape 6’. The code to do 
it is on the cover CD, and the whole 
world will benefit. 


Doing it with the DOM 


To most surfers, a Web page looks much 
like a page in a book: text, images and a 
few extras. There may be the odd 
moving part, but basically everything is 
fixed. The developer knows different. 
Even with version four browsers, many 
Parts of the page could be changed on 
the fly. We used methods like 
document.images(‘mylmage’) to get the 
attributes of specific objects on the 
page and change them so, say, a button 
glowed as the mouse moved over it. 

If you've created a rollover before, 
you've already used the DOM. It simply 
defines what attributes different tags 
have, how the tags can nest inside each 
other and the ways you can get at parts 


access the node's parent, children and 
siblings. Or you can start right at the top 
of the document - the <HTML> tag - 
and ‘walk the tree’, going through every 
single node to examine it, change or 
remove it. There's an example of this on 
the CD, but in day-to-day development 
you'd have to be doing something pretty 
darn funky to use it. 

Far more useful are the methods that 
enable you to get at a specific element. 
In NN4, you could give an image a name 
like ‘ford’, then change the picture 
displayed through JavaScript with 
something like 
document.images[‘ford’].src = 
‘zaphod.gif’. Using the DOM it’s a little 
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If funky text transitions and fades are your 
thing, flick your tongue at Gecko's Realm, 
www.narian.com/gecko. 


http://sightspace.com/ns6 is another 
collection of tips for NS6. It isn’t the best 
organised site around, but has a good links 
section with votes. 


For an eye-injuring but nonetheless useful 
glance at what some of the new functions will 
do, have a look at http://web01.fureai.or.jp/ 
~tato/ver5testcontents.htm. 


of the page. The only difference with the DIV tag does contain other tags, 


Netscape 6 is that there are more they'd be known as ‘child nodes’. more prosaic: 
functions, giving you control over every Nodes also have a parent - the tag document.getElementByld(‘ford’).src = 
part of the page. that contains it - and probably have ‘zaphod.gif’. 


The full specification for the DOM is Be 
online at www.w3c.org/DOM, but it 
makes decidedly snooze-inducing 
bedside reading. So here's a simplified 
rundown of the terms it uses. 

Individual tags are known as 
elements in the DOM. Any element can 
have various attributes: images have a 
‘src’ attribute, anchors an ‘href’, any can 
have a name or ID. If you’re just creating 
a rollover image, it’s the elements you 
want to be dealing with, but there’s 
more to the DOM than that. 


siblings - other nodes contained by the 
same parent. 

Once you've got a handle on the node 
you're dealing with, the DOM lets you 


Okay, that just looks like more typing. 
But remember, using these techniques, 
you can access every single tag on your 
pages, something only Internet > 


If the W3C’s DOM spec gives you a headache, 
try www.zvon.org for a prettier version. 


Netscape 6, and to a lesser extent Internet Explorer 5, implement a large part of the 
W3C DOM-1. But not all. Here's what to watch out for... 


Netscape 6 HTML quirks: + nameditem — not supported in IE5 for Windows 


The DOM breaks an HTML 
document up into a tree-like structure. 
At the trunk are the outer <HTML> 
and </HTML> tags that contain the 
entire document. The trunk then forks 
into <HEAD> and <BODY> sections, 
and these fork again and again into 
smaller branches. 


Walking the DOM 


In DOM-speak, the branches are known 
as nodes. A node can be the entire 
document, or a fragment of it. For 
instance, a DIV tag and all the text (and 
any other tags) it contains are a node. If 


Yeah, they’re all a little lizardy, these 
Netscape 6 folk. But www.geckonnection.com 
have some amazing graphical demos of 

NS6 at work. 


- The padding of HTML cells is Lost when the table is hidden, then 
shown using JavaScript and CSS 

+ <DL> tags cannot be nested with <DD> tags 

- You can't change the properties of a hyperlink until the user has 


interacted with it 


JavaScript quirks (notice how different the IE versions for Macs and 
Windows are): 

+ appendData() - not supported in IE5 for Windows 

+ applyElement() - only supported in IES for Windows 

- clearAttributes() - only supported in IE5 for Windows 

+ contains() — not supported in NS6 

* createAttribute() - not supported in IE5 for Windows 

- createEntityReference() - not supported in NS6 

- Date.toDateString() - not supported in NS6 

- Date.toTimeString() - not supported in NS6 

+ deleteData() - not supported in IE5 for Windows 

- doctype - not supported in IE5 for Windows 

- document.referrer - buggy in NS6 (doesn't work for forward and 
back buttons) 

- getAttributeNode() - not supported in IE5 for Windows 

- getElementsByName() - serious browser incompatibilities 

- implimentation.createDocument()- not supported in IE5 

- implimentation.hasFeature() - not supported in IES for Windows 
- innerText - not supported in NS6 (not part of DOM-1) 

+ insertData() - not supported in IE5 for Windows 

- mergeAttributes() - only supported in IE5 for Windows 

«name - not supported in IE5 for Windows 


-normalize() - not supported in IE5 for Windows 

+ propertylsEnumerable() - not supported in NS6 

- removeAttributeNode() - only supported in NS6 

+ removeChild() - not supported in NS6 

+ removeNode() - only supported in IE5 for Windows 
- replaceChild() - not supported in NS6 

+ replaceData() - not supported by IES at all 

- replaceNode() - only supported in IE5 for Windows 
+ setAttributeNode() - not supported in IE5 for Windows 
« splitText() - not supported in IE5 for Windows 

+ substringData() - not supported in IE5 for Windows 
- swapNode() - only supported in IE5 for Windows 

- value - not supported in IE5 for Windows 


this listis a combination of the information at 
www.oreilly.com/news/flanagan_1100.html and www.xs4alLnl/~ ppk/js/versionS.html 


Error: d,toDateString is not a function 
| Source File: http://localhost/date.htm 
Line: 13 Column: 0 


Netscape 6’s new JavaScript console can help you iron out bugs in 
your code and catch the unsupported features. 


Web Design Special 


Web Design Special 


Make sure your Web authoring package 
creates clean, properly nested code or the 
latest browsers may choke on it. 


Explorer used to do. Your tags don't even 
need a name or id. 

Suppose you want to pull out all 
the content of the chapter headings 
ina document to create a dynamic 
table of contents. 

You could have done it in IE4 with 
something like document.all.tags (“h2”), 
but not with Navigator. Now you can do 
it using the DOM with 
document.getElementByTagName(‘h2’). 

What you get back is a list of all the 
<H2> nodes in your document, 
sensibly called a nodeList. Step through 
that list, and you've got all your chapter 
headings, ready to build into a dynamic 
table of contents. 


One strict DOM 


But what if your chapter headings are 
laid out using <FONT> tags of certain 
sizes, not <H2>? You're pretty much 
out of luck. 

There's no room here to go into 
HTML 4 and Cascading Style Sheets 
(see feature on page 64), but they've 
been around for a while. Use them to 


In this article, we've been talking about the 
DOM as if there were only one - the W3C 
DOM. It’s saved us some ink, but it’s not 
quite correct. Even Netscape 3 used a DOM 
~ it just wasn’t very good. Here are some 
others you're likely to encounter: 

*DOM-O: the IE3 and NN3 Document 
Object Models, soon off to that dungeon in 
the sky 

- Transitional DOMs - the proprietary IE4 
and NN4 DOMs. Not very compatible 
-DOM-1: the standard established by the 
WSC and (mostly) implemented by IE5 and 
NS6. Outlines methods for accessing 
elements on the page 

-DOM-2: the next step up from the W3. 
Covers how to manipulate stylesheets. Still 
at the recommendation stage, but chunks 
are supported by IE5 and NS6 


make your documents look nice instead 
of font tags. There are some good sites 
below to get you started. We're not 
being arbitrary. Good HTML should 
separate the content from appearance. 
The <FONT> tag pretty much spat all 
over this rule and, though browsers still 
tolerate it, they won't forever. 

You'll notice that IE5 and NS6 are 
much less forgiving of sloppy HTML 
than previous versions. When NS6 first 
appeared, many Webmasters screamed 
blue murder - it had mangled their 
pages! In actual fact, it was their pages 
that were broken, other browsers were 


Find out more online... 


Peter-Paul Koch's JavaScript pages 
www.xs4all.nl/~ ppk/js/dom1.html - an 


excellent introduction to DOM-1 scripting, 


with a browser compatibility table, sample 
code and much else besides 


scottandrew.com 

www.scottandrew.com - good articles on 
writing for Netscape 6. Need to capture 
events? Check here 


Getting Ready for Navigator 5 [NS6] DHTML 
www.inquiry.com/techtips/dhtml_pro/10min 
/10min1299/10min1299.asp - Shelley 
Powers shows you how to use scripting objects 
to make your pages backward-compatible 


DOM Tricks 
www.alistapart.com - good series on various 
DOM tricks 


Transitioning to W3C Standards 
http://sites.netscape.net/ekrockhome/stand 
ards.html - Eric Krock, Group Product 
Manager of Netscape, outlines what’s changed 
since version 4 


About DOM . DOM Activity statement 
Technical R - - 


Technical Materials 
FAO Mailing List 
Members only resource: DOM Working Group 


Document Object Model (DOM) 


December 14, 2000. Maintained by the W3C DOM WG. 


What's new? 


The DOM Requirements document has been updated. 
The DOM Level 2 Recommendation is available (announcement): 


DOM Level 2 Core Specification 
DOM Level 2 Views Specification 
DOM Level 2 Style Specification 


. 

. 

° Level ation 
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just doing the best they could with them. 
Often it’s WYSIWYG editors that are to 
blame; some create appalling code. 
Have a look at your pages - are tags 
nicely nested inside each other? Tags 
should close in the reverse order they 
opened, so <a href="page.htm”> 
<b>This is a link</a></b> is wrong, 
though almost any browser will still 
display it. 

It’s a trivial example, but to see why 
structuring your documents correctly is 
important, think back to the nodes. The 
anchor tag above and everything it 
contains is a node. But if you used some 


Project VII 
www.projectseven.com/dreamweaver/index.h 
tm - fixes for some Dreamweaver Extensions 
that don't work in NS6, plus a rant or two 


ls your site ready for Netscape 6? 
http://hotwired.lycos.com/webmonkey/00/ 
04/indexta.html - a basic intro to changing 
your pages from the ever-great Webmonkey 


WebFX 
http://webfx.eae.net - good site for example 
code, some Mozilla-specific stuff 


They're not light reading, but you'll find the official specs of the various DOMs at www.w3c.org. 


clever script to pull it out and put it 
somewhere else in your document, it 
would be missing the closing bit of the 
bold tag. The rest of your document 
might suddenly appear bold, or who 
knows what. 

By getting the structure of your 
document right, you're doing far more 
than making sure they'll display 
correctly in Netscape 6 or Internet 
Explorer 5. You are future-proofing your 
pages, and moving one step closer to 
XHTML. But that’s a subject for a whole 
new article. 

Until then, enjoy your DOM! 


NS6 Fails Standards Compliance 
www.oreilly.com/news/flanagan_1100.html - 
the author of JavaScript: The Definitive Guide 
takes a swipe at Netscape about missing DOM 
support. Good info, though 


Mozilla 
www.mozilla.org - the Open Source project 
behind Netscape 6. Found a bug? Get involved! 


WSC DOM pages 

www.w3c.org/DOM - home of the 
specifications everyone argues about. 
Useful for hard-core technical info, but not 
easy reading 


THE ESSENTIAL READ 


Brand new Apple hardware revealed! 
Read all about the new Macs in our special 
report from the SanFransisco Expo. 


TWO NEW WEB TUTORIALS ESSENTIAL TEST 


YOUR MAC THE LATEST 
ONLINE LASER PRINTERS 


Making sites in Dreamweaver 4 _— Great speed and quality, falling 


and Fireworks 4 (with 30-day price-tags and no running costs 
demos!) Plus, registering domain - you know you want one, but 
names: all you need to know. which laser printer is for you? 


The essential read for all Mac users 


| is from the makers of 
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IN-DEPTH REVIEWS 


Issue 100 on sale 29 Jan. NEW TREATS FOR 


i 


EVERY MAC USER 


Norton 6, Expression 2, Concept 
Draw, Swift 3D 2, DVDs, games, 
Internet chat clients, hard disks, 
music software and more... 
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Oyster Partners 


Ouster is one of London’s most respected Web design companies, 
and believes that: “if you push design far enough, it’s about how 


society works.” 


or Oyster Partners, the key to creating 
award-winning Websites is being culturally 
aware. This doesn't just mean thinking about 

| the way in which its designs are used and 
keeping an eye on the technologies that bring them to 
life; it also involves concentrating on the culture of the 
company itself. 

“How you work really affects the outcome, so 
if you encourage people to really think about what 
they’re doing and you don't accept norms, you don't 
necessarily create a design team that’s based around 
styling,” says Hugo Manassei, Oyster’s chief 
creative director. 

“You create a design team who are thinking 
responsibly about how whatever they develop impacts 


on the user. If you develop that thought, as we have, 
then you can't really turn around and have a normal 
structure of how things work,” he adds. 

Although Oyster isn't readily associated with any 
particular project, its six-year history has seen a 
succession of quiet revolutions: landmarks in Internet 
design that have grown out of the company’s insistence 
on combining cultured design with technical 
innovation, research and planning. 

An early Internet bookshop project was the first 
e-commerce site that Europe had ever seen, 1996’s 
MTV Europe site introduced pioneering back-end 
technology that tracked its users and introduced 
like-minded people through email and home pages, 
and last year, Oyster’s Victoria & Albert Museum and 


1, Oyster’s acclaimed redesign of 
London's Victoria & Albert 
Museum Website, at 

[w] www.vam.ac.uk, offers a 
sophisticated take on the virtual 
museum concept. The site can be 
personalised by the user and offers 
a3D Gallery Explorer to visualise 
the institution it complements, 
alongside news updates and 
virtual exhibitions. 

Oyster won the pitch by presenting 
a cartoon version of its views on a 
museum experience of the future, 
based on a tour of Europe's 
museums and a study of the 
technology they already employ. 
“At the moment people associate 
the V&A project with the Website 
but the interesting part is inside the 
museum, in the new British 
galleries, with interactive kiosks 
that are personalisable and hook up 
to the Internet,” says Hugo. 

“It's great systems design, just 
thinking: ‘okay, I’m going into the 
museum, how is technology going 
to give me a better experience?’ 
and we spent a lot of time thinking 
about those scenarios,” he 
explains. When it is implemented, 
each visitor will have an ID, 
allowing them to store info as they 
move from kiosk to kiosk to avoid 
information saturation. 
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Rockstar sites between them, picked up every major 
design award going. 

Far from creating tension in the ranks, then, Oyster's 
varied portfolio seems to continually refresh its 
creativity: “Designers tend to be animals that like a lot 
of diversity and a lot of change,” says David Warner, 
creative director. 

“Even the people who scream loudest to do an 
MIV-style project... eight months later they’re sick of it 
and want to do something else. We've got a policy of not 
creating stars and not creating specialists, and | think 
that helps keep it fresh,” he adds. 


Buck Rogers toilet 


Hugo considers that a well-informed vision of the 
future and the impact of emergent technology on 
people's lives, is an essential part of Oyster’s 
creative makeup. The company’s R&D department 
has the enviable task of travelling the world, looking 
into new technologies and encouraging the rest of 
the company to be inspired by them: “They came 
back with a Japanese loo seat that washes your arse,” 
Hugo explains. 

“But they do provide a vision of the future, and they 
bring in projects based on that vision of the future.” 
One such experimental commission, currently 
underway on behalf of a major telecommunications 
client, is a realisation of the ‘50s sci-fi dream of 
building a house of the future. 

Dubbed the Intelligent Home project, Oyster’s 
role is to employ Web technology to link up the 
home with the local community and the owner as 
they travel around the world: “The home almost 
becomes a Web environment, and it’s kind of bizarre,” 
Hugo says. Whether it'll have a futuristic toilet seat is 
yet to be decided. 


Unorthodox engineers 


When it comes to design, the company is well aware of 
the pitfalls of setting out a style manifesto, and is keen 
to emphasise that it doesn't cultivate an in-house style. 
Eschewing the wistful ‘wouldn't it be cool if...’ approach 


FIGHTING 7 


to brainstorming sessions, the company favours 
creating a working idea at the start of the process. 

Oyster is also wary of reusing ideas, and feels that 
some Web design companies base their success on the 
repetition of a winning formula: “You can spot the sites 
where a designer found an interesting bit of code, or an 
interesting design hook or trick, and they've reverse- 
engineered the whole site around it,” David says. 

“| think you have to be careful, because it wears thin. 
Also | think it’s about making things sustainable, 
because designers still work in that publishing, 
product-design paradigm which is — you do the 
thinking, make the thing, cast it out there, it gets used. 
But you're not really associating with that thing a year 
later,” he adds. 

Technological prowess has been a characteristic of 
Oyster’s development from the outset, and the 
company has earned a reputation for heavyweight 
rocket science. 

Yet despite being involved with a number of product 
developers and customising available technology to 
meet design needs, for Hugo, Web design is likely to 
undergo a paradigm-shift in future — one in which 
technology is subsumed by the needs of the user. 

“It's increasingly about dialogue,” he says. “It’s less 
and less about having a creative idea and selling that 
idea using direct mail or television to vision a brand. It’s 
more about immersing in experiences, and that's 
across the board.” 

The same outlook applies to other promised Web 
transformations, such as 3D content and broadband. 
Rather than a liberating freedom from constraints, it’s 
predicted that these advances will blur the definition of 
the Web designer, perhaps beyond all recognition. 

For Oyster’s final pearl of wisdom, it’s over to Hugo: 
“The language of interaction isn't about styling, it’s not 
about the screen: it’s about what's inside people's 
heads. People are focusing too much on the screen, 
and they need to get inside people’s heads more. Then 
we'll really start adding value,” he concludes. EE 
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1. Rockstar is much more than a games company — 
it aspires to create a lifestyle. This site won many 
awards last year, including a Milia d'Or anda 
Silver Award from the Art Directors’ Club. 


2. The site for Monsoon makes Internet shopping 
a very personal experience. Clothes are arranged 
into ‘wardrobes’, making it easy to put a certain 
look together. Emphasis has been placed on high 
image quality in product swatches showing 
texture and detail. 


3. The award-winning design of the site 

combines classical and contemporary fine art 
with a modern twist, and the site is comprehensive 
and easy to navigate. 


4. The Accessorize site is treasure-trove of 
goodies with a rich and colourful atmosphere that 
appeals to its 14-25 year old age group. 
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Mixing business and pleasure 


Every year Oyster throws a free industry party called Skip Intro 
— akind of showcase for cutting edge technology which brings 
together all environments regardless of platforms, devices and 
businesses. Oyster devised a series interactive games: 
Champagne Social, Tantrum Triumph and The Social City. A 


mobile phone acted as a contact point throughout the evening, 


as a joystick to play the games with, and as a tool to vote on the 
outcome of the games. 

A server holding JSP files linked to a hub, which linked out 
to computers with serial connections to phones, an ISND 
router, SMSs networks and then to huge display screens. To 
play the games, each player had to give their mobile phone 


style guide 


company info — 


number, but remained anonymous. For added privacy, 
everyone passed under a pseudonym. 

Champagne Social [c] gave people the opportunity to meet a 
mystery mate through a text messaging process, and rewarded 
them with champagne. Everyone was given a series of 
questions and their answers were then matched to a suitable 
partner. When each person arrived at the venue they had to 
SMS Oyster so the company could send SMS to each person 
and their partner to let them know they could start to send 
messages to each other. The first message contained a unique 
number for each couple. Once each couple had met, they went 
to the bar, showed the matching number their phones, and 
received a free glass of champagne. 

Mobile numbers remained totally confidential because all 
text messages were brokered by a central system that sent 
messages on to each match, removing all details apart from 
the person's pseudonym and message. 

The Social City [a] was a game where an accident involved a 
broken gear stick and the world went spinning backwards in 
time. To redress matters, the last 43 millennia had to be be 
recreated, over the space of just a few hours. Everyone had to 
use their mobile phones to vote as to whether the earth would 
become blissful fields or a crazed city of skyscrapers, robots 
and alien rule. Every half hour players were asked to vote on 
issues affecting the Social City by sending an SMS to the 
numbers displayed on the screen. Once the votes had been 
counted the choice was played out on screens. 

Tantrum Triumph [b] was about a sinister group of toys who 
had developed violent tendencies. The battles were live on 
screen with players deciding the outcome by choosing 


warriors and moves on their phones. 
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Computer Arts Dreamweaver & 
UltraDev Special — COSB0012 
UltraDev isn't just a ‘pro’ version 
of Dreamweaver: find out where 
to use DW and how UltraDev can 
help when it comes to adding 
features such as e-commerce. 
Also discover how to create a top- 
end Website, why behaviours are 
an important feature of DW and 
how to optimise Web graphics 
with Fireworks. Plus resources, 
books and an extensions guide. 
CD 30-day trial versions of 
Dreamweaver 3, Fireworks 3 and 
UltraDev plus a heap of free 
extensions and resources. 


Issue 49 — Code CA049 
Character animation in 3D Studio 
MAX, plus Flash 5 review. 

CD ///ustrator 9 demo. 


Shockwave Special — COSB0013 
We lead you through getting to 
grips with the new features of 
Flash 5. Other tutorials on Flash 
include basic interfacing 
techniques, how to use motion 
graphics, advanced server 
interaction and writing your own 
3D engine. We also familiarise 
you with the basics of Shockwave 
and introduce you to its scripting 
language Lingo. 

CD We've got demos of Flash 5, 
Director 8, FreeHand 9, Fireworks 
3, Illustrator 9 and After Effects. 
Plus 25 Director behaviours. 


Issue 50 — Code CAO50 

Special 50th issue, tutorials in 3D 
Skills, Photoshop and Flash. 

CD Complete version of Merlin VR. 


Special — COSB0014 

Learn the latest 3D techniques with 
our five in-depth tutorials. Find out 
how lighting can make your 
renderings look more realistic and 
professional and our cover 
illustrator, Bill Fleming, gives expert 
advice on how to master rendering. 
We've got 50 beginner’s tips that 
will give you professional results, 
and we review the best software 
programs and graphics cards. 

CD Three complete 3D programs: 
Pixel 3D, Blender 2 and Strata 3D 
and all the files you'll need to do 
the tutorials. 


Issue 51 — Code CAO51 

Star awards 2000 — the best 
creative software and hardware. 
CD Full version of Pixels 3D. 
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Mllustration Special — COSB0015 
200 Vector tips covering all aspects 
of CorelDRAW 10, FreeHand 9 and 
Illustrator 9 plus a comprehensive 
guide to their interfaces, with 
shortcuts to make life easier. 
Create the cover image using 
Ilustrator and our tutorial — and find 
out how to combine ///ustrator and 
Photoshop. Plus profiles of leading 
artists and everything you need to 
know about typography. 

CD Demos of ///ustrator 9, 
FreeHand 9 and Fontographer plus 
Photoshop 5, animations, plug-ins, 
tutorial files and more. 


Issue 52 -— Code CA052 
Photoshop for photographers and 
mastering Flash 5 

CD Exclusive Maya demo. 


Special — COSB0016 

Six PS6 tutorials on vectors, 
shapes and the Liquify tool (and 
more) to familiarise you with the 
latest upgrade, plus in-depth guides 
to the new interface and the best 
plug-ins. On the Web side, discover 
how the bundled ImageReady 3.0 
can transform your graphics, and, if 
you're looking for inspiration, more 
than 30 top artists spill the beans 
in our special feature. 

CD 27 Photoshop plug-ins including 
eyecandy 4000, xenofex and 
Flaming Pear icons plus demos of 
Illustrator 9 and Photoshop 5.5. 


Issue 53 — Code CA053 

Style, branding and interactivity 
CD {up of the Pops iQrom™ 
business card, 105 PS6 shapes. 


+44 (0)1458 271108 
take out a subscription — see pages 21 & 74 
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Illustration: Kerry Roper designer/typographer [t] 079. 
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Cascading Style Sheets: 
the how, why, what 


CSS has far more to offer than ‘just’ rescuing your Web 
pages from the sly truancy of HTML standards and the 
abominations of competing browsers. Here's your guide to 
this most mysterious of micro-languages... 


he Internet is no beach party for fussy designers, 
which presents something of a problem, for desigers 
are famed for their fussiness. The typographer 

i wants every letter pixel-perfect in place and shape, 
every sans and serif set on a leash. 

The layout artist wants his paragraphs precision aligned, 
images with a knife edge wrap and a gutter that never moves. 
The illustrator wants full-screen uncompressed background 
images, the animator full-screen, 24 frame-per-second 
cartoon fun, while Joe Public just wants his Web to work. Such 
things are rarely possible on the Net. 

In fact, to say the Internet is no beach party is an 
underestimation worthy of a politician in shmuck. The 


Designer's Internet is a complete and utter dog. And this you 
should have discovered for yourself. 

If by chance you haven't, fear not: your time will come. 
Even at the most basic levels, the Web won't work the way 
you expect it to: why on earth, for instance, does <font 
size="2’> not get the same result for everyone that looks at the 
page? It’s ridiculous. 

If you're new to this game, then maybe you're thinking: “It’s 
fine, I'll just get my head round it and everything will make 
sense, and work the way | want.” Sorry, you’re wrong. The Law 
of Unexpected Outcome applies to every designer, no matter 
how experienced, from the novice coding his first <B> tag, to 
the old-hand: “I was there in the days before Flash” guru. > 


Whether you're Joe Bloggs or Mr AltaVista, you’ ll still be 
slaving over hot code in the early hours trying to just get this 
damned page looking the same for everyone that wants to see 
it, on Mac or PC, in IE or Netscape, with or without glasses. 
Because that’s what designers want to do. 

And things aren't getting any better: with the arrival of 
digital TV, Dreamcast, PS2, PDAs, WAP Netscape 6, and all the 
rest, the variety of platforms you’ve got to cater for is quite 
simply... on the up. 

Oh dear. 


The answer is here... 


So where do Cascading Style Sheets, or CSS, fit into all this? 
The answer is simple: they help. That <font size="2”> for 
instance: you have tried it, previewed the results in different 
browsers, and flicked about the on-board font-size settings, 
haven't you? 

It’s not a pleasant thing to see, after you've spent hours 
lovingly crafting the position of every word on your page, 
placing all the images and balancing out the tables just right. 
Things wrap around where they shouldn't, columns get pushed 
out of kilter, bits of text disappear in IE, the list goes on... 

But those who have discovered the slightly mysterious, dark 
art of style sheets, have found they can control the size of the 
font that appears much more closely, and make it very hard for 
viewers to change it by accident. Moreover, they can even 
specify this in pixels, by writing something like: 


<FONT style="font-size:12px">...</FONT> 


Okay, so the results aren't perfect — Netscape renders a 
fraction smaller, but they're damned near as good as you're 
going to get. 

Take another example. The one thing you don’t want, 
regardless of what browser settings your user has, is for your 
links to be underlined, and turn red when the mouse is rolled 
over them, which happens in Internet Explorer. Try this: 


<A href="#" style="color:black; text- 
decoration:none;">...</A> 


Easy, huh? But you would never have known that. 


Harmony 


The power and number of such rescue remedies available 
direct over the style sheet counter is limited only by your 
vision as an HTML designer. But more of these later, because 
first you need understand just what CSS actually IS, and how 
to use it. 

You see, there is only one CSS, as set down by the W3SC, or 
World Wide Web Consortium (pay them a visit at 
www.w3c.org), and by some fate or other, Microsoft and 
Netscape have managed to achieve a remarkable degree of 
harmony over its implementation. 

Let's be honest, this is more the harmony of Oasis, not 
Beethoven, but there’s few enough bum notes for even the 
fussiest designer to be able to cope, providing you’re not trying 
to do American Pie on five lagers. 

Okay, forget the lager for mo. Here's the serious bit. CSS 
is a language, or a micro-language that’s integrated into 
HTML, principally from the v4 browsers (which means IE4 and 
NS4). It uses its own syntax, it doesn't interfere with old 
browsers, and it offers a stronger, more predictable and more 
varied way to control the way things appear on your Web pages, 
from font sizes right through to margins, forms, layers, and even 
some interactive features. 
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Keep an eye on on our own site for regular features, tutorials and updates 
on CSS and other aspects of Web design. Plus, if you sign up for our 
weekly newsletter (in the right-hand column), we'll send updates direct 
to your inbox, often with exclusive tips and updates. 


In short, it pairs attributes (such as size, color or 
border-style) with values (such as 4px, #003366, or dashed). 
An attribute picks out a property, the value says what it should 
be. Take this example: 


<P style="color:blue; margin-left:10px”>...</P> 


This makes whatever appears within the <P> appear in blue 
(you can equally use a # colour reference), and indents it by 10 
pixels. This is fantastic: using basic HTML, you would have to 
use a lengthy <FONT> tag to set the colour, and worse, mess 
around with table cells for half an hour (and slow the download) 
to achieve the indent. Here’s another example: 


<P style="width: 50px; border-style: solid; border-width: 1px; 
border-color: black; padding: 5px”>Here’s some words</P> 


Now your paragraph appears just 50 pixels wide, with a1 pixel 
black border and 5 pixels space between the border and the 
text. Good, eh? 


style="?:?” 

This is the first important thing about CSS: attributes and 
values. The second is that you can use it in several different 
ways. They all work in all browsers, and you can use them all 
together, which is particularly useful. First off, you can apply a 
CSS style directly within a tag in your main body HTML, as in 
the examples above. It's dead easy. You just use style=”...” Learning CSS 
within the tag, just as you would write color="”...” or href="...”, 
and write your CSS between the quotes: 
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<H1 style="font-weight:bold”>This appears as a large, bold 
heading</H1> 


The basic syntax for CSS, in case you hadn't gathered, is 
attribute:value - such as font-weight: bold, or color: #330033, 


with a semi-colon between pairs: font- w3c 
weight:bold;color#330033. (You can add in spaces liberally at www.w3.org/Style/CSS 
will and to taste.) The WSC, or World Wide Web consortium, is 
For a reference to the key attributes and values you can play god of all Web standards, including CSS. It's 
A A Not a beautiful site, but it’s guaranteed to have 
with, see page 69. For the full whack, and there’s thousands of the right answers to your questions. Lots of 
them, see the W3C's site. heavy references and links. 
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You can use this style=”...” syntax in any tag you want, What a waste of code and time to go through applying that in 


providing it makes CSS sense to apply that attribute to that each and every case. 
tag. Mostly CSS sense is the same as common sense; in a few And what if halfway through the design process, or perhaps 
cases a bit of fiddling about does the trick. during a redesign, you want to change it? 

For instance, you can't apply a margin to a word in the This is where CSS really comes into its own: it provides you 
middle of a sentence, but only to what are called ‘black level with a way to define a set of styles just once at the top of your 
elements’ - meaning most tags which start ona new line: <P>, HTML document, and then apply these wherever you see fit, or 
<H1>, <H2> and so on. have them applied automatically to every relevant tag. 

But what if you do want to apply a style to a word in the For instance, for the case above, you can set up a style sheet 
middle of a paragraph - make it blue, bold and italics, say? In rule that says: ‘All <P> tags to be 12px Verdana or Helvetica, 
‘traditional’ HTML you would write this: unless | say so’. No probs. 

And then you can set up another rule which says: “Whenever 
TutorialFind ... <FONT color="blue”><B><I>...</I></B></FONT> ... | say this <P> is a Subhead, it’s actually 14px and bold, but the 
www.tutorialfind.com font is the same.” 
Head here and tap in CSS to find a wealth of It's efficient to code all these items in CSS, as Now if you change your mind at a later time, you just use 
tutorial on the subject of style sheets - or just ¥ - ee eee me 
about anything design ad technology-related style="color:blue; font-weight:bold; font-style:italic”. that rule, and it’s done for the whole document. 
for that matter. A superb directory. But now you don't need any of the tags, where do you put the Or, you can even stick it in an external file which the Web 

style="...”? page looks at as its loading, just like it looks at an image, and 

To be frank, it doesn't matter: you could choose any of these then you only need to twiddle one file to change a style 
tags; but the pro Web gurus favoured means is to use the “do throughout an entire site. Fantastic. 
nothing” <SPAN> tag: So how do you do allthis? 

Creating a style sheet is simple. Anywhere in your 

<SPAN style="color:blue; font-weight:bold; font- document, but traditionally within the <HEAD>...</HEAD>, 
style:italic”>...</SPAN> add the tags: 
<SPAN> has no particular meaning or attachment - it’s a <STYLE type="text/css><!— 
middle man, a conduit: it simply means: ‘Do these things to 
whatever’s within me’. Got it? Okay, let’s move on... //—></STYLE> 

This defines the beginning and end of your style sheet. 
Fast and loose The comment tags <!— ... —> make sure it doesn't upset 
If you remember, we said that there are several ways you older browsers. 
can use Cascading Style Sheets. Now, within these, you can start adding style sheet rules. For 

Writing style="”...” is just one of them: it’s the simplest to instance, to define all <P> tags as 12px Arial or Helvetica, you 
grasp in principle, but it’s still a hassle if you just want every write this: 
paragraph of your text to appear in 12-pixel Verdana, or failing 
that Helvetica, and then all your subheads to be 14px bold. P { font-size:12px; font-family: Arial,Helvetica } 


-& Untitled Document (css/untitled htm") - Dreamweaver 
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<html> 


<head> 

tithe CSSctitie> 

<meta hitp-equie “Content-Type” content="text/himl; 
et=s0-G859-1"> i 


‘yourself. If by chance you haven't, fear not: your time will come, 
Even at the most basic levels, the Web won't work the way you i 
‘expect it to: why on earth, for instance, does not get the same result : 


for everyone that looks at the page? It's ridiculous. Chere 


If you're new to this game, then maybe you're thinking, It’s fine, I'll : 
just get my head round it and everything will make sense, and get it : 
all going the way I want. Sorry, you're wrong. The Law of i 
Unexpected Outcome applies to equally every designer, momatter 
how much experience, from the novice coding his very first tag, to 
the old-hand, 'I was there in the days before Flash’ guru. Be you Joe = 
Bloggs or be your Mr AltaVista, you still be there slaving over hot =: 
‘code in the early hours trying to just get this damned page looking 
the same for everyone that wants to see it, on Mac or PC, in IE or 
Netscape, with or without glasses. Cos that's what designers want to 


<style type="text/css"> 

<b 

p {font: normal 11px Verdana, Arial, Helvetica, 

‘sans-serif | 

td {font: normal 11px Verdana, Arial, Helvetica, 
ent 


> 


do. 
Control your text size Format all your text in one fell swoop Centralise your heading styles 
Ever get really miffed that setting <FONT size="n"> for your text Why mess up your HTML applyting font tags to every line of body § Nowyoucanset up sub-styles for headings, subheadings and so 
never properly controls the result? And moreover, the sizes 1, 2, text? Use style sheets and you can set the properties for a on in just one place - so if you change your mind later, your can 
3, 4 and so on don't leave much room for precision. The CSS particular tag, wherever it is. This style rule should do for just reformat the whole lot by changing just one line. Add this to your 
font-size property offers far more control. Try this: about every line of body text you use: style sheet: 
<P style="font-size:12px”>Put your text in here</P>. p {font: normal 11px Verdana, Arial, Helvetica, sans-serif } .subhead { font-size: 14px; font-weight: bold } 

td {font: normal 1Ipx Verdana, Arial, Helvetica, sans-serif } 

Much better. Then for the subhead, write: 


<P class="subhead”>Subhead in here</P> 
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You see how this uses just the same attribute-value pairs as 
we used before, within the style=”...”. 

In fact, they are always exactly the same, and the same 
rules apply. Instead, you're simply sticking the pairs within 
curly braces { ... } and saying at the front which tag you want the 
style to apply to. 

In the case above where we wanted all links to be black 
with no underlines, it’s simpler than anything to create a 
style rule: 


A{ color: black; text-decoration: none } 


It’s really quite incredible how easy this is to do and the degree 
of control it offers over the Web design, considering the state 
of the battlefield in the browser market. And it really works. 


Top of the class 


So what if you don't want your style to apply to every instance 
of a particular tag, just when you say so, as with our subheads? 

In this instance, you define a named style, let’s call it 
‘subhead’ for the sake of being imaginative: 


.subhead { font-size: 14px; font-weight: bold } 


The . before the name identifies in the code that this is 
defining a named style, not a tag. 

For some obscure reason, this is called a class, but there 
yOu go. 

Now wherever subhead appears in your document, you 
simply apply your subhead class: 


<P class="subhead”>Here’s the subhead</P> 
It's just like using style=”...”, but instead you write class=”...” 


and reference the class you defined in your style sheet. Like 
style=...” this can go ina <SPAN>... 
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<SPAN class=”...”>...</SPAN> 
..ina<TD>... 


<TD class=”...">...</TD> 
... a<BODY>, an <IMG>, or anything that makes good CSS 
sense. Pretty good, don't you think? 

In a similar way to this, you can define classes for headings, 
special links anything you want. 

And your style sheet will look something like this: 


Shorthand 


Often when you're knocking 


<STYLE type="text/css><!— 


P { font-size:12px; font-family: Arial,Helvetica } 

A { color: black; text-decoration: none } 

.subhead { font-size: 14px; font-weight: bold } 

.header { font-size: 20px; font-family: Arial, Geneva, Helvetica, 
sans-serif } 


together a CSS style, you can safely 
use shorthand to save code, effort 
and general confusion. For instance, 


you might want to set up text style 


toplinks { font-weight: bold; color: green } like this: 

//—></STYLE> P { font-weight: bold; font-size:11px; 
font-family: Verdana, Helvatica } 

External style sheet 


If you want to put your style sheet in an external file, to Shorthands makes life a lot simpler: 


apply to your entire site, simply copy whatever's within 
the style sheet (that is, exluding the <STYLE>...</STYLE>) 
in a text document, save it in your site and change its 
extension from .txt to .css (or add the extension if there is 
none already). 

Then add a line of code like this within the head of your 
HTML document: 


P { font: bold 11px Verdana, Helvetica } 


Another example is defining borders: 


-border { border: 1px solid black } 


<LINK rel="stylesheet” href="mystylesheet.css”> Mostly these are common sense; 
just be sure to test your shorthand in 
Be sure to change the HREF so it points to your style sheet. 
(Incidentally, if you can user server-side includes, with an ASP 


server for instance, this is usually the faster method for users). 
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Directions: There are in general 


Get clever with links 

The default behaviour for links - underlined and turning red on 
rollover in IE isn't to every designer's taste. Use CSS to apply a 
little individuality to your <A HREF>s: 


a{color: #003366; text-decoration: none } 
a:hover { color: white; background-color: #003366 } 


Now you've got no underline, but the links reverse out ona 
blue-green background colour when you roll over. 


Create text margins 

Margins are a nightmare to create in old HTML, fiddling about 
with tables and never quite knowing how the widths are going to 
turn out. Forget it: turn to CSS instead: 


<P style="margin-left: 10px">...</P> 


Simple, eh? 


Funky IE cursor effects 

In Internet Explorer, you can change the cursor that appears when 
you roll over a link - or indeed, images, text and so on that don't 
have links. How? Try this style rule: 


a{ cursor: crosshair} 
Alternatives to crosshair include hand, text, help,wait, and 


various resize options: n-resize (for a North angle), ne-resize (for 
Northeast), and so on. 


a a’ 


There's never been a better time to start designing 
Websites. In five years, the Internet has shifted 
from being the preserve of computer geeks to the 
new medium ao one can afford to be without. 


Britain has witnessed explosive growth and acceptance of 
the Net - you can't open a magazine or switch on the telly 
these days without being accosted by Wad addresses 


Hand in hand with this popularity 
has come a huge demand for Wal 
designers who can produce sites to 
le spectrurn of weird 
tf 


athe 
Plunge into Web design, now is the 
time to do it 


If you already have background 
in computer aided design and are 
ages like 


standing the irny 
usage end font application. But producing grap! 
ieb is 8 whole different kettle of fish to produci 


Juicy quote 


Ever wanted to have tempting quotes appearing in large 
italics through the main text of your articles (or callouts as they 
call them in the magazine business)? No probs. Just put this 


before a <P> tag: 


<DIV style="width:130px; ; float: right; color:maroon; font-size: 
18px; font-style:italic; font-weight: bold; “>&quot;Here’s your 


juicy quote&quot;</DIV> 
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Links and interactive 


Links are something of a special case. First, they can be 
awkward, because people like to set their browsers to 
underline all links, and in IE they go red on rollover. 

But as a designer, you might not want this, and fair play; 
maybe you want them to be bold, or only underline on rollover, 
and also go blue; or maybe change that background colour. 

More recent additions to the CSS spec take this into 
account, and are supported in Internet Explorer 4 and up, and 
Netscape 6. 

Above we defined this: 


A { text-decoration:none; color:black } 


But here nothing happens on rollover, and we want something 
to. These later browsers support something called CSS 
selectors, which means you can define styles like A:link, 
A:active, and most importantly, A:hover, which simply applies 
the style when the mouse is over the link. So you could set up a 
style sheet like this: 


A { text-decoration: none; color: black; font-weight: bold } 
A:hover { text-decoration: underlines; color: darkgreen } 


And your plain, black, but bold link will underline and turn dark 
green on rollover. Excellent. 

Usefully, you can't only use these with the <A> tag - 
perhaps you want a rollover effect on non-linking styles too, or 
maybe you want a different rollover on your main links from 
those in the body copy? 

You can apply the :hover syntax to other tag definitions: 


H1:hover { color:green } 


And to class definitions too: 


uter 
_/ creative 
network 


Designer forms 


and Netscape after V6, but it’s well worth it. Try this: 


<FORM> 

<INPUT type="text” name="textfield” style="color:white; 
background-color:black; font: 1px Verdana,Helvetica” 
value="Enter your keywords” size="30"> 

</FORM> 


In case you're in Netscape 4x, the effect is a black form input 


field, and the text comes out white. 


Web forms look pretty dull in the default scheme of things, but 
you can easily style them up a bit with CSS. It only works in IE 


-mainlink:hover { color: darkblue } 


Now any tag <A href="...” class="mainlink”> will turn blue on 
rollover, in the latest browsers. 


What's cascading? 


As a final note, throughout all this wonderous stuff, you may 
have been asking: “Yes, but what the hell is ‘cascading’? 
Sounds a bit like a waterfall, and in a way it is: nothing complex 
in principle, but a little tough to explain. CSS has a tree-like 
structure, and one definition or class effects the things that 
come lower in the structure, or within its scope, unless another 
CSS rule comes into play, saying something different. 

So, for instance, if you define the <P> tag as being black 
12px Arial, and a .link class as being blue Verdana, then think 
about this: 


<P>For a more info, <A href=”...” class="link” 
style="color:green”>click here</A> or else</P> 


We've got CSS cascading in three levels here - rules for the 
<P>, rules for .link, and a style=”...” definition. All the 
properties from the <P> carry over into the <A>, except that 
the .link class says blue Verdana. So for the link, black Arial is 
ditched in favour of blue Verdana, althought the font size 
remains 12px. But the style="...” then says green, not blue, so 
the link in fact turns out blue, but remains 12px Verdana. 

This may seem difficult, but in practice it isn’t, and makes 
good sense - plus it puts huge power and flexibility at your 
fingertips. So go forth and use it! 

If you haven't already, check out some of the cool 
effects explained in the captions on these pages, and 
you'll discover the fantastic reach CSS has, and the level 
of control it can offer you over what your user sees. Plus, 
there much more to come: keep an eye on 
www.computerarts.co.uk for regular updates. EEE 


Enter your ermal address: 


Form sizes 

Another form-related stroke of CSS genius: if you test your work 
on all the browsers and platforms, you'll find it's nigh on 
impossible to get the widths of inputs, dropdowns and so on the 
same for all viewers - which is a mare if you're after well-spaced 
design. You can take 95 per cent control of this using the width 
CSS property, which works on forms for IE, and using the 
traditional size=”" for NS: 


<INPUT type="text” style="width:200px” size="30"> 


Guide to key CSS terms 


Providing it makes CSS sense to apply these attributes to a particular tag, then you can apply them directly within the main body 
HTML — and this is just a selection, for the full list, check out www.w3c.org... 


nr 


TEXT 
color # reference or name padding-left pixel, points, percent. Also margin- hole es margin-bottom 
eg, color:#000000; color:black eg, padding-left:5% 


font-family fone, font2, font3, sans-serif, serif, mono (in order of eeiers border-width none, solid, dotted, dashed, double, suey ie inset, Gee 
eg, font-family:Arial, Geneva, Helvetica, sans-serif eg, border-style: ridge 


font-size points, pixels, percent, xx-small to xx-large border-width pixels, points, percent, 
eg, font-size:10pt; font-size:10px; font-size:10%; font-size:small eg, border-width:1px 


font-weight f normal or bold border-color # reference or name 
eg, font-weight:normal eg, border-color:blue 


font-style normal, italic or oblique BACKGROUND 

eg, font-style:oblique background-color # reference or name 

; eg, background-color:#CCCCCC; begun ory 

text-decoration none, underline, overline, line-through, blink 

eg, text-decoration:line-though background-image url(url in here) 

eg, background-image:url(bg. gif) 

LAYOUT 
left pels, points, percent background-repeat no-repeat, repeat, repeat-x, repeat-y 

eg, left: 50% eg, background-repeat:no-repeat _ 


top pixels, points, percent background-attachment fixed or scroll ' 
eg, top: 40pt eg, background-attachment: fixed — 


width pixels, points, percent 
eg, width:100px 


height pixels, points, percent 
‘eR, height: 100px 


margin-left pixel, points, percent. Also or Oe margin-top, margin-bottom 
margin-left:20px 


computer 
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Search 4 fone Now 
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Leisure {including Cinema) 
Mobile—new 


Motoring 

er °F 
Shopping 

Travel (including Weather) 


UK Breaks 


Enter keywords... Cool scrollbars Background control 
Not really CSS this, but while we're on forms, here’s a useful Did you know that in IE you can change the colours of the People often ask about how the pros create the effect where you 
JavaScript trick that people always ask about: how to include scollbars at the right and bottom of your page? Pretty cool. Add have a background graphic which doesn't tile and repeat; or 
words in a form field, such as ‘Enter keywords’, which clear when this to your style sheet, for instance: which doesn't move when you scroll the page. The answer, of 
they click in the space. Simple: course, is using CSS, and here it is: 

body { scrollbar-face-color: #2A314C; scrollbar-shadow-color: 
<INPUT type="text” name="textfield” value="Enter your #2A314C; scrollbar-highlight-color: #2A314C; scrollbar- body { background-image: url(background.gif); background- 
keywords” onfocus="this.value="”" size="30"> 3dlight-color: #9AB6C4; scrollbar-darkshadow-color: repeat: no-repeat; background-attachment: fixed; } 

#202534; scrollbar-track-color: #202534; scrollbar-arrow- 
(After this.value=, that’s two single quotes followed by a color: #CCCCCC } Replace background.gif with the URL of the image. background- 
double quote.) repeat can be no-repeat, repeat, repeat-x or repeat-y. 

Twiddle the colour # references to suit yourself. Attachment can by fixed or scroll. 
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chill 


Cooking up a spicy mixture of form and function, RH(’s recipe for 
success is: “the right technology is put with the right design and 


vice versa — that’s key.” 


Funky front ends and funky back ends,” is the 
tenet at the heart of Red Hot Chilli 
(www.redhotchilli.com), says Rob Foote, their 

J Head of Creative Strategy. Not that this 
happy balance between looking good and working 
brilliantly is an easy thing to pull off, but Red Hot Chilli 
seems to be managing it... the client list includes 
Citibank, ABN-AMRO, NetMortgage, Foxtons and 
Thomson Travel. Since humble beginnings in 1998 with 
a team of two — founders Rob Foote and Farouq Adams 
— the company has now expanded to 65 employees, 
consolidated within its London offices. 

The level of professionalism at the company is high 

— within the Creative Design and Multimedia 
departments there are only two juniors, with the rest 


being senior designers or art directors. And there's 
none of this: ‘Oh, the IT department hates the marketing 
department...’ At Red Hot Chilli, integration is key. 
“We make everyone aware of everyone else's jobs,” 
says Rob. 

There are five core departments at Red Hot Chilli: 
Technology, Creative Design, Multimedia, Strategic 
Consulting and Mobile Data & Wireless. From this, you 
might guess that Red Hot Chilli is a bit of a one-stop 
shop and you'd be right. The company aims to provide 
just about everything a client could need, from the 
drawing board to site maintenance. 

“On one project, we did everything,” says Rob. “We 
gave it a name, an identity, designed it, built it, 
maintained it and it was out in a month. So we do the 


1. ChilliMail 

This was a demo about Red Hot Chilli’s ChilliMail system, 
produced to send to someone in the music industry. ChilliMail 
is Red Hot Chilli’s own, rather cunning, creation: a Flash-based 
email marketing system that uses embedded Active Server 
Page script to track respondents and link them to a database. 
As Rob explains: “A lot of emails are very flat, but ChilliMail 
creates a self-contained projection that you can send. It’s not 
just a way of viral marketing, you can go in there. For instance, 
we might send a campaign of ChilliMails, posing various 
questions and forms to complete, and you can forward them to a 
friend — but there’s always a hook. We then capture the data and 
add it to a database, it’s a combined marketing strategy.” 

Red Hot Chilli sends out ChilliMails for 15 to 20 companies ona 
regular basis and they seem to have caught the imagination ina 
way that the bland ‘invites’ of yesteryear didn’t: “The clients 
were only achieving a 5 per cent response rate to past reply 
forms,” says Rob, “But with ChilliMail they had a 45 per cent 
response rate in one hit. There's a direct benefit.” 
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Java 3D 


What that “molecular 
diagram” on the Floot.com 
site actually does and how... 


When Floot.com requested something 


more ‘esoteric’ than your average site, Red 


Hot Chilli saw numerous raytracing and 


other 3D possibilities in the Java 3D 


Applet. “Open GL has been around for four 


or five years, but we wanted to make it 


usable from a Web point of view,” says 


Java programmer Frank Cassidy. 


“The searching navigation 


tool maps out 3D co-ordinates, and finds 


links to similar songs.” This hyper- 


sensitive Java bloodhound then learns 


intelligently from each user session so that 


the user can pick and choose. A word of 


caution to the chronically indecisive 


though — since the cortex will form links to 


literally hundreds of related tunes, just 


deciding on a final track could be a 


challenge in itself. Once the user has 


finally decided, the song is viewable in the 


centre of the screen, while a streamable 


system gets to work playing the song. 


And the more the user enjoys wandering 


through this 3D musical universe of 


infinite variety, the more likely they are to 


press that ‘Buy’ button, especially when 


they can listen to the actual song at the 


same time. It’s all very clever. 


whole job. If clients have to go to three people for the 
design, technology and consulting, they'll farm it out. 
We do everything in house, with our own hosting 
service located at Level3. It gives us more control, 
especially if we need access immediately.” 

In keeping with the holistic Red Hot Chilli ethos, it 
also helps if employees have had experience of various 
aspects of the whole process. Rob himself has also 
worked on rebranding projects and point of sale 
material, and “learned a bit” that way. He adds that the 
trouble with working purely from a Website point of 
view is that: “People tend to get caught up in that but 
Flash has its limitations depending on what the client is 
trying to say. The key is to integrate it — you shouldn't 
notice it’s there.” 

All of which requires a certain amount of “thought 
and depth” that goes beyond dazzle graphics. Around 
25 per cent of project time is taken up by design work 
and the amount of time spent on each project can vary 
from 15 days to about 180 days. 

“Three or four designers take the brief and have a 
general get-together,” explains Rob. “This is a fairly 
open book, but they bear in mind certain brand and 
corporate guidelines. One idea tends to come to the 
front and we then present three examples to the client, 
and they'll say: “That's a funky bit, or | like that bit of 
theory,” and we'll create a sort of hybrid.” 

While the Creative Design and Multimedia teams 
work on interfaces and corporate image, the Technical 
team will do the back end. For the initiated, the term 
‘back-end’ basically encapsulates all the integration 
with existing (legacy) systems, content management 
and back-office tools that you don't see. 

Red Hot Chilli designs this software bespoke for the 
client or integrates it with third party software. 
Technology-wise, NT and UNIX-based platforms 
mainly feature, with database development conducted 
primarily with Oracle 8: but also, on occasion, using 
SQL or IBM's DB2. The Mobile Data & Wireless 
section of the company is now working with the design 
team — higher bandwidth offering on 3G, means higher 
level graphics and multimedia on hand-held devices. 

And the story doesn't end once a project has winged 
its way to the client. Extra functionality is regularly 
added to existing sites — Red Hot Chilli has retained 


85 per cent of its clients over the past two years. “At 
first, we didn't want to do the hosting, just the technical 
side,” explains Rob, “but we wanted to retain the client 
— it’s beneficial.” 

In fact, it’s been so beneficial, that rapid expansion 
is on the cards, with countries such as France, Germany 
and Italy all potential markets. Although Rob says that 
expansion into Europe is a “big possibility”, he 
emphasises that this shouldn't happen so quickly that 
the company loses its sense of identity. 

“A lot of companies in our position have tried to 
expand quickly and have lost their core. All five 
sections of the company are integrated, so we've got 
our model right here before moving, and our base 
would still be in London.” A total of 15 languages are 
spoken among the staff — a cultural diversity that will 
come in handy when the inevitable happens. 
Meanwhile, Red Hot Chilli is certainly one of the 
spiciest options on the digital menu. FEES 
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mortgage_guide 


all you need to know 


We know that taking out a mortgage can be difficult 
there is an enormous range of products to choose fi 


There is a range of help facilities on this site, inch 


[MORTGAGES EXPLAINED] 
{FaQ] 

(GLossary) 

(THE HOME BUYING PROCESS] 


These have all been designed to make the process e 
and to assist you in choosing a mortgage, 


If you are still having problems, or need more help, ¥ 
either [E-MAIL] us or call our free help facility 0845 | 


1 | The user types in a keyword to begin 
a music search. This keyword can be 
the track title, the artist or the genre. At 
the search results stage, the user can buy 
the track, listen to it or view the Cortex. 
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The Cortex (the molecular-style 

thingy above) graphically displays the 
chosen track so you can see exactly what 
you've chosen and laterally links to others 
with a similar profile. 


3 | It allows you to dance through a 
library of tracks like the ‘synapses of a 
brain’. Tracks are classified according to 
criteria such as beats per minute, 
geography — even the ‘mood’. 


4 | The whole experience aims to 
resemble browsing through a music 
store. The back-office system allows the 
uploading, classification and management 
of the thousands of tracks in stock. 
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Hello, if you are registered, please login 


Foot is the music space for grown ups: blues, classical, 
contemporary, folk, fusion, jazz, local, reots, world and 
every conceivable crossover, 


To use our taste-matching, lateral-thinking Cortex, cliek on 
the Cortex button. 


To search the thousands of tracks on the site click on Music. 
To read the articles we have gathered, click on Words. 


To get the most out of Floot, please click on Login to tell us 
who you are or to register! 
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‘ur main offices are in the extraordinarily beautiful city of 

1 My Moor ; Bath, 100 miles dues west from London in England. Our 
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124 Walcot Street 
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‘You can contact us by email 
customer service 
service@floot.com 


content enquiries 
content@floot.com 


editorial enquiries 
editorial@floot.com 


[Go to. S| 


FIND A MORTGAGE netmortgage 


On PURCHASE 
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- the best place to find the right mortgage for 
you with as much or as little help as you need 


WHY USE US 


WHAT MAKES US BEST netmortgage ... 


We & CAN DO FOR YOU is a free service that brings together virtually 
every mortgage available in the UK, including 
unique, market beating products you will not find 
anywhere We include all the big lenders and 
virtually every small, local building society 


it backed by Savills Private Finance, the market 
ling independant mortgage broker that 

Aged over £500 million of mortgages in 1999. 
We aim to give you more choice, more help and 
allow you to do more on line than any other web 
site 


login 
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| 
| Personal mortgage page allows you to apply either on line or off line for y % 
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1. www.floot.com 

This world music site, which makes use of 3D Java, is backed by Freeserve and Music Choice Europe 
and has links to thousands of tracks, which is where front and back office comes in. The client was able 
to download Red Hot Chilli-designed software that enabled them to completely manage their stock. 
The central image here is of a cortex: “A huge molecular diagram of songs,” as Red Hot Chilli’s Java 
programmer Frank Cassidy puts it (see walkthrough and Java 3D boxout). 


2. www.netmortgage.co.uk 

As Rob points out: “It takes a good designer to make the normally boring into something quite different. 
Technically, this is the most advanced site out there.” Red Hot Chilli had to provide an entire backend 
system for this one — NetMortgage provided the algorithms but the interface and process software is 
Red Hot Chilli’s own. “We wanted a completely different slant, to simplify things down to the essence. 
Filling in forms is a nightmare, so we streamlined the information so we only posed relevant questions.” 
The emphasis is on the human side of things, so that users can relate to it. “Finance isn’t particularly 
exciting,” adds Rob. “We tried to find a way round that, played around with the interface.” Most sites 
tend to dispense with the enticing graphics the further you click into the screens, until it becomes more 
like a Word document. “If it’s text-heavy, we try and think of ways of making it less so, and add a level of 
meaning to each section.” 


3. www.touchbase.com 

This was for a big corporate telecoms company. “They didn't want anything too flat, or too traditional,” 
says Rob: “something that moved, whizzed and banged a bit. This is fluid, it rolls out from the core 
navigation. We've used analogies of nature, a shell, or a feather, to create a natural, flowing style.” 


4. www.rabidTV.com 

This ‘Rapido-type’ site’ was completed in June 2000 and was a bit of fun for the creative department. 
“We never say no,” says Rob, gamely. “Obviously there’s a minimum fee we can accept, but basically 
we'll take anything on. We do work for quite a few big advertising agencies, which are more corporate 
and it’s like a big whirlpool. You can get sucked away. We look for variety in design themes.” 


5. www.villadeals.com 

This one was created for Thomson Travel Group. “They wanted a site that broke away from the normal big 
travel holidays — lots of villas and a young, funky design. It was quite technical because we were putting 
in deals from four companies. | quite enjoyed doing that one though, it had a fresh, summery feel. It's 
nice when a client says, “I don’t want it to be traditional.” We came up with quite a pleasing solution.” 
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Making the most of 


Dreamweaver Extensions 


Animated transitions, extra functions buttons, a 
scrolling area and security-safe code are just a 


download away... 


side from its fantastic amount 
of features and great 
WYSIWYG interface, 
Dreamweaver is also one of 
the most extensible software packages in 
the world — one reason why many 
professionals wouldn't use anything else. 
There are over 250 in the exchange, far too 
many to go through individually, but we are 
going to use about ten of the most popular 
and useful, to create a Website which has a 
lot more functionality than meets the eye. 


The ‘finishing’ touches that many of the 
extensions offer are the polish that can 


change a site from average, to exceptional. 


Just remember, in your own projects, use 
extras sparingly: a page filled with 50 
different custom JavaScripts might be a 
fantastic feat of programming, but it’ll be a 
gargantuan feat of downloading too... 


Part 1: Getting your Extensions 


We'll be creating a concept site for a prospective client using 
downloads from the Macromedia site 


DIY 


You can learn how to create and 
author your own extensions in the 
exchange. Despite only needing a 
knowledge of JavaScript to 
create an extension, there is 
slightly more to publishing a fully 
compiled .mxp (the Extensions 
extension, if you like!), The full 
specifications and ‘how to’ guide 
is freely downloadable at the 
exchange. 


Macromedia 
exchange 


The Macromedia exchange has 
been expanding recently. You can 
now get Dreamweaver, 
Dreamweaver UltraDev and 
Flash extensions (although the 
Flashfiles are more like archives 
of Actionscript for enhancing 
your movies). 


Extensions 
Manager 


It’s great to have loads of 
extensions, but it takes longer for 
Dreamweaverto kick in (as you'll 
see when you enable the Nokia 
WAP suite). So it’s always useful 
to decide which extension you 
will be using most and only use 
the others when you need to. The 
improved Extensions Manager 
makes adding and removing 
these files quick and easy. 
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1] To start, we want to login to the exchange and 
get our fabulous pre-written Extensions. There 
are some fine examples of JavaScript which can be 
incredibly useful in creating that elusive perfect 
Website. First visit www.macromedia.com/ 
exchange/dreamweaver. 
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Now we are going to select and download the 

Extensions we will be using in this tutorial to 
make a one-page concept site for a prospective 
client, with all the trimmings. Download the 
following Extensions in your chosen format: Frame 
Buster, Set Alt Text, Right-Click Menu Builder, Print 
Link, Previous Page Link, Page Transitions, DHTML 
Scrollable Area, Add to Favourites, Insert Corporate 
Mumbo jumbo (or Lorem Ipsum), Preload Status, 
Resize Window, Meta Generator and 
MFX_fullscreen. 


PAEBUARG SEE 
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With the new Extension Manager installed, 
return to the folder created exclusively for your 
extensions. From this folder you can double-click 
each Extension you wish to install, accept the license 
agreement and let the software do the rest. 
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Yes it's a pain, but you'll have to register to get 
yourself a Macromedia ID. Click on this 

button, fill in the rest then insert your user ID and 

password into the boxes at the top of the page. 
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5 | Create a folder in your hard drive called 
Extensions and store them all there. The folder 
can be located anywhere. Feel free to download any 
other Extensions that take your fancy, but these 
ones are enough to do some amazing things... 


8 | When you click on and highlight each 
successfully installed Extension, there is a 
summary in the text box at the bottom of the page 
which explains what each extension does and where 
it can be found when you restart Dreamweaver. 
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6 We now have access to the goodies. As you 
can see, there are literally hundreds of extras 
which do things you probably didn't know were 
possible. You can select from the dropdown at the 
top of the page for a specific area you are interested 
in. We want to select ‘all categories’. 


Download the Extension Manager 
(rot required for Dreamweaver 4 90ra) 


The Extension Manager runs within Dreamweaver and lets you #esily matall new extensions and manage the 0 
fakeady have Version 12 of the Extension Manager (peoinstalled with Orearmweaver 4) includes support for Fla 
(requires Flash 5) and selectable enabling/disabing of your metalied extoni 


‘The Macromedia Extension Manager requires Dreamweaver 3 or greater, Mac OS B6 ot or higher, Windows J 


ME or NT. 6 MB additions hard drive space, and 10 ME additional RAM. You can also wew the complete Eviad 
MManmger) 2 culenee ontan online 


# Download the Extension Manager stelle: and eave t on your machine After you 
natall the Extension Manager, come back to the site to choose individual 
extensions to download 

© Double-click the metalier to begin the installation process 

# Launch the Extension Manager from within Dreamweaver by choosing Manage 
Extensions from the Commands menu 


. @ either the Windows (2364) Extonsion Manager or Miecedosh 227%) 


Extension Manager 
Qerunn ro rem arre AnD DOWMLOAD EXTENMIONS 


Once you have the Extension Manager installed, retum to the Dreamweaver 
Exchange and download extensions 

‘¢ Each extension has ite own page that includes the extension package, a short 
description, user ratings and renews, and a dcumaiwn.atoup where you can post 
questions. and gel gunipot for that extension 


6 | If you are using a version of Dreamweaver 
prior to version 4, the new 1.2 version of the 
Extensions Manager needs to be downloaded. The 
Extensions will work on the older version, but there 
will be new Extensions added to the exchange 
which will require the correct version of the 
Extension Manager, so you may as well get it out 
of the way. 
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9 | If you are using multiple Macromedia Web 
authoring software, you can select which 
package you install the extension into by using the 
dropdown at the top of the Extension Manager. 
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Part 2: Right-click Menu Builder 


We're going to set up a Website in Dreamweaver and ‘tart up’ 
a right-click interface from the Commands menu 


Shopping carts 
Dreamweaver’s Big brother, 
Dreamweaver UltraDev, also has 
its own Extensions section in the 
exchange. You can geta 
ready-made, fully functional 
customisable shopping cart plus 
shopping cart extensions — all 
for free! 


WAP extensions 


The free nokia WAP extensions 
mean that you will be able to 
publish WAP pages to mobile 
phones, without having to learn 
and worry about any of that scary 
looking XML. Unfortunately, the 
documentation and help files are 
stilla bit on the Greek side... 


Copy the index.html file from the tutorial 
folder on the coverdisc. You will also need to 
copy the images and buttons folder to your hard 
drive and set up a Website in Dreamweaver by click 
Site>New Site and setting your parameters. 
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4 | You will be presented with a slightly weird- 
looking tabular dialog box. To understand 

what is going on, simply click ADD. Now preview 

the site in your browser by clicking on F12. 


Re-insert ‘Right click menu builder’ from the 

Commands menu. This time we will enter links 
for the five main buttons on the site, going to .html 
pages of the same name. There shouldn't be any 
targets or divider lines for these buttons. Then we 
can visit Computer Arts, you must enter http:// 
before you insert a Web address. Set target to 
‘_blank' and tick the divider line. You can even add 
the mailto protocol to directly email and this has 
been added this to the final box. 


Open the index.html. Everyone knows that 

with a quick mouse right-click, you can view 
the source code of a site and steal pictures. We 
don’t want that to happen on our Website: it's far 
too good for thieves. 


APR Y WE 


ops and Contact | Events & Weddings | Books 


Now do a right-click and notice the difference 

to the standard format. We now have the 
ability to choose whatever functions we want for 
our Right-click Menu. 


If we finished now, we'd have a right-click 

interface that only a mother could love. To 
make it ‘pretty’, click on Styles and then select the 
Custom Styles radio box. We've changed the font to 
size 2 Arial, but you can go wild here, even adding a 
background image. 
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From the main menu, click Commands>Right 
Click Menu Builder. 
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awer School | Shops and Conta! | Events & Weddings | Books 


Close the browser window and use the History 

palette to revert two steps, to where we first 
inserted the Right-click Menu Builder. 
Unfortunately, this great Extension's dialog box 
cannot be re-entered without resorting to hand 
coding, so we will re-insert. 


9 | You probably noticed the site is looking sparse 
content-wise. This is for a reason. You should 
have downloaded and installed one of the following, 
Corporate Mumbo Jumbo or Lorem Ipsum. These 
are instant Content generators. We've chosen Lorem 
Ipsum, and its icon is in the Common palette. 
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If you chose Corporate Mumbo Jumbo, this 

can be found in the ‘Goodies’ section of the 
Objects menu and has a spade as its symbol. Select 
about 1,000 characters... 


o ..and watch your page fill up with content. 

his is the perfect tool for presenting sites to 
clients who haven't yet got their content together. 
Both Corporate Mumbo Jumbo and Lorem Ipsum 
(Which writes Latin text) contain the correct sized 
words to get the right proportions for future 
content on a Web page. It's a good idea to select 
the text, change the font to verdana or arial and set 
the size to 2. 
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Lorem ipsum dolor st srt, consectetuer adipsscing eit, 28d diam nonummy nibh euismed tincidunt 
ut iaoreet dolore magna afquam erat vokApal, Ut was! eram ad minim vencam, qué nostrud exerci tation 
Ulamcomper susciet lobortis rial ut alquip ex ea commodo consequat, 


Duis astern vel eur inure dotor  hendrent 1 wiputate velt esse mole 
reugt nulla facibais at vero eros ef accumsan at wsto odo dignissim 
eterat sugue duis dolore te feugat nulla feciisi Loreen ipsum dolor sit amet, consectetuer adipiscing 
eit, sed dram nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpal 


consequat, vel ium dolore eu 
blandit praesent luptatum x2 


Lt west enim 36 minim veream, quis nostrud exerci tation ulkamcorper suscipit lobortis msl ut aliquy 
Jas commodo consequat Outs autem ‘dolor in hendewrn sn vulputate wit ease molest 
Jconsequat. vel turn dolore eu feugiat nulla al voro eros et a cumsan at usta odio dignissim 


F12 to test in a browser, give it a right click and 


12 
12] test the menu. You will have to create blank 


dummy pages for each of the five buttons you 
named in the right menu builder, or they'll link 
through to an error page. 


Part 3: DHTML scrollable area 


The size and speed are all customisable... 
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1 Our client doesn't want reams and reams of 

‘next’ and ‘back’ pages to click through, but 
equally can’t have a standard scrolling area because 
of the extra menu bar at the bottom of the page. 
Fortunately, we have another Extension to the 
rescue. Select all the dummy text and cut it. 


Hmm... but something isn't quite right. Use 

the Layers palette to select the layer of the 
three which has the standard text in it. Replace the 
text with a paste from the clipboard we filled earlier 
and set the font and size to your liking. We have 
used size 2 Arial. 


Fit POCA” 


Now click on the ‘commands>dHTML 
scrollable area’. 
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G Select the two layers with ‘scroll up’ and ‘scroll 
down links, re-size and reposition them to 
look similar to the screenshot. You can actually swap 
these links for buttons, depending on your 
requirements. We've changed the font and text size. 


Accept the settings and click OK. It is easier to 
change the settings in the WYSIWYG interface. 


‘er expedit distinct. Nam fib 
i quod a impedit anim id quod maxim 
‘omnis dolor repeliend. Temporem sutet 


rerum necesit atib saepe eveniet ut er repudiand sint et 


Lorem ipsum dolor sit amet, consectetur sdipscing elt, 
incidunt ut Jsbore et dolore magna aliquam erst volupat 


Et herumd dereud facilis est er expedit distinct. Nem lit 
-omque nihil quod & impedit anim id quod maxim 


st, omnis dolor repelland. Tempotern auter 
atib saepe eveniet ut or repudisnd sint ot 


Go Preview in your browser and check out the 
scrolling area. The size and speed of scroll are 
all customisable, depending on your preference for 
space on screen. 
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Part 4: Fancy extras 


Relative links and extra functionality are at your fingertips 


Some good ones 


Other particularly useful 
extensions are: Resize Window — 
to choose specific dimensions for 
a pop-up window; Close Pop-up 
Window — enables you to attach 
a button on a Web page to close 
the window, rather than clicking 
the top right-hand ‘X’ button; 
Preload Status — which shows an 
animating loading bar, so your 
site viewers know how long it 

will take for your page to load; 
Marquee — a JavaScript 
variation on a Java 

horizontal scroller. 
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@ Setar Ton 


Files of type: [Macromeda Extension Packages [mp] | Cancel J 


@ Make sure the following Extensions have been 
installed: Print, Previous Page Link, Set Alt 
Text, Page Transitions and Set As Favourite. 
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4 | To check it's working, press F12. Hmm. No 
transition. Not to worry, it only occurs when 
you move to the site or exit the site for or from 
another URL, so type in www.lego.com and watch 
the magic unfold. 
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Click on the new text link and copy the text in 
the link box from the Properties palette. It 
should read ‘javascript:history.go(-1);'. Now click on 

the Previous Page button and insert the previous 
code into the link box. Delete the text box and you 
are all set. This Extension enables you to return to 
any page that you have previously come from, 
making a relative link rather than an absolute path 
to a specific .html file. 


‘Optinne Image ln retorts... 
Create Web Photo Album... 


em ipsum dolor sit amet, cons 
idunt ut labore et dolore magné 


harumd dereud facilis est er ex 
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{scroll down} 
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2 | We are going to use the Page Transitions 
Extension to give ‘wow’ factor to people who 
enter the site. Click Commands>Page Transitions. 


19 ned Contact } Eventa & Weddings | Socks 


G Now we need to attach extra functionality to 
the site. Use the layers palette to hide our 
DHTML scrolling area. 


8 | Now we want to enable the print button. Click 
on the ‘Goodies’ text in the Objects palette 
and select Common. You should see a small Print 
icon, click it. 


FF Page Ent’ © Same as above 
© [Random Tenation 


You will now get this nice interface. Hard to 
believe there are so many DHTML transitions 
available. To keep things interesting, we've selected 
‘random transition’ for page enter over two seconds 
and ‘circle out’ for page exit over three seconds. 


Creation 


6 | In the Objects pallete, click the ‘common’ text 
at the front and click on ‘Goodies’. There is a 
backward bending arrow, click on it. Click on the 
Previous Page button, and then click on the 
backward bending arrow in the Object palette. Your 
screen will look a bit weird, but it's only temporary. 
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9 | You will now see the following dialog box. 

You can choose to have a text link, insert an 
image as the print button or use a pre-made print 
button. We have browsed for the 
‘buttons/button_previous_page_up.gif’ and 
selected the image, and deleted the old rollover. 
We're a rollover down, but the extra functionality of 
being able to print is worth the price. 
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© Now we're going to enable our Website's 
audience to get to it more easily by enabling 
them to set the page to their Favourites menu with 
a simple click. Click on the Set To Favourites button, 
then from the Behaviours palette, select Show 
Events for version 4 and later browsers. 
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Now we need to set alternative text for all of 

the images. Doing this one by one is a pain in 
the neck, but always adds to the overall polish and 
professionalism of a Website. Fortunately, we have 
an Extension to do the hard work for us. Click 
‘commands>set alt text’. 


There are one or two useful Extensions which 

work for you behind the scenes on your 
Website, but there is one which is vital for the 
success of every site: Meta generator. Click the 
‘common’ text in the Object menu and select Head. 
Click on the Generator icon. 
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Now select ‘IE’ from the Behaviours menu, and 


then select Add to Favourites. 


14] You get a simple dialog box that sets the ‘alt’ 
text for images from top left to bottom right. 
This makes naming the alternative text for all the 
images on a site a rapid process. You can do it 
manually if you really want. 


Part 5: Behind the scenes Extensions 
Namely, Meta generator — fiddly but useful 
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Now you have a simple dialog box which has 

all of the major meta tags that search engines 
use to boost your site traffic. This Extension is 
useful, but finicky — you must fill in all the regions or 
it will give you an error message. It's still highly 
useful though. 


Select what you want to appear in the viewers’ 
Favourites page. You can set the next page to 

whatever you want, but we suggest you link it to the 

first dummy page set up in the right menu builder. 
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15 | Now unhide the scrolling DHTML area and 
give the site a preview. With a load of simple 
Extensions, we have created a page with animated 
transitions, extra function buttons, a scrolling area 
and unstealable code. 


And that is that. There are heaps more 

interesting and useful Extensions. There are 
also some awful ones, too. Do experiment and if 
possible, always test an Extension before installing 
the next. There are a few rogue Extensions which 
crash Dreamweaver and UltraDev, but if you install 
20 Extensions at once, you'll never know which 
one's the culprit. Happy Webbing. EEE 
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[the Web] 


Where better to find advice on building great Websites than on the Web itself? Computer 


Arts guides you through some of the best resources out there... 


Useful resources 


The Ultimate Counter 
www.ultimatecounter.com 

This is the ultimate place if you want, or need, to adda 
hit counter to your site. The basic service is free, while 
a small upgrade fee gives you access to more advanced 
options. It’s essential for analysing the popularity of 
your site. 


Bellsnwhistles.com 


www.bellsnwhistles.com 

Building your Website can demand a great deal of 
resources, such as graphics, applets, programming 
help, music files, construction tools and more. 
Bellsnwhistles.com is the definitive starting place, with 
literally hundreds of files for you to download and use 
free of charge. 


The Java Centre 


www.java.co.uk 

Java can be a troublesome scripting language - one 
comma in the wrong place and you and your normally 
patient visitors are going to know about it. But help is | 
at hand, thanks to the wonderful java.co.uk. Providing a 
wealth of hints, tips and applets for all, this is one 
resource that should be at the top of any serious Web 
designer’s bookmarks. 


FreewareJava.com 


www.freewarejava.com 

By adding Java applets to your site you can create 
some exciting features that will keep visitors intrigued 
and fascinated. Containing absolutely tons of free 


java and dhtmi bells and whistles - navigation menus 
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Although it’s not the prettiest of sites, you'll find an abundance 
of downloads free of charge at the rather aptly named 
[w] www.bellsnwhistles.com. 


downloads, as well as links to Java e-zines, tutorials 
and jobs, this clean, friendly-designed site could be 
the definitive Java resource. 


Anfy Team 


www.anfyteam.com 

Java applets can make your personal home page much 
more attractive to look at, and hold people's attention 
for much longer than plain text and graphics sites. Anfy 
is a versatile application that creates a plethora of 
effects that will really make your site pop! Be there or 
be square... 


Meta-Builder 2 


http://vancouver-webpages.com/META/ 
mk-metas.html 

If you're somewhat of a traditionalist and are creating 
your page using raw HTML, rather than something like 
Dreamweaver or GoLive, it can be a real pain to 
generate the Metatags that are used by search engines 
to index and find your site. This on-line program does 
all the work for you. Simple but effective. 


Web Building 


www.help.com/cat/4/index.html?tag=st.hp.fd. 
ont.cat_4 

There are times when it’s not enough just to read an 
FAQ or browse through an archive or previous 
questions. Sometimes you need to ask questions and 
get answers yourself. This site hosts a huge number of 
Web-related question-and-answer forums, and direct 
links to many newsgroups too. 


Computer Arts Special’s sister magazine Cre@te Online has a 
Website full of information, news and reference material. 


Cre@te Online 


www.createonline.co.uk 

Future Publishing's Cre@te Online is the ideal place to 
visit if you want to learn about cutting-edge Web 
design. Get tips from the best designers in the world, 
read all the latest Web-related news and take part in 
many a Survey. 


Graphics and design 
Spooky and the Bandit 


www.spookyandthebandit.com 

We've included this site purely for its aesthetic and 
inspirational value. Once you've got past the strange, 
yet entertaining loading screen, Flash goodies are 
aplenty. Overall, an entertaining site that can teach you 
a few things about Flash. 


Computer Arts Web Studio 


www.computerarts.co.uk/web 

Not content with having an abundance of Web design 
tips, tutorials and techniques, here at. Computer Arts 
we've gone and redesigned our huge site again. 
Whether you’re a Web guru searching for that elusive 
tip or a first-timer wondering where to start, this is the 
place for you. 


Computer Arts Forum 


www.computerarts.co.uk/forum 

Log on to the Computer Arts forum for advice on all 
things Web. Get tips on Dreamweaver, Flash or any 
other package from the bustling community, ask the 
Computer Arts team a question or simply look around 
and enjoy the friendly graphics banter. 


A Flash extravaganza! Take some tips from some of the best at 
this innovative and amusing site. 


Computer Graphics on the Net 


http://ls7-w ww.cs.uni-dortmund.de/cgotn 

It often seems as though America virtually owns and 
runs the entire Internet, which is why it’s refreshing to 
discover this European links site. Unlike most sites, 
which concentrate on mainstream computer graphics, 
this scholarly site provides links to sites that focus on 
graphics development and science. 


Adobe 


www.adobe.com 

The home page of Adobe offers a lot more than just a 
look at the company’s vast range of products. You'll find 
tips, tutorials and user forums here, all of which can aid 
you in your day-to-day use of Adobe products. Make a 
point of checking out Premiére 6, which brings whole 
load of Web functionality to the already excellent 
video-editing application. 


Macromedia 


www.macromedia.com 

Take a look at the future of Web design by looking at 
Macromedia's excellent range of software. 
Dreamweaver 4, Fireworks 4, Flash 5 and Director 8 
Shockwave Studio are among the inspirational 
applications on show here. If you haven't yet checked 
out the all-encompassing Macromedia - just what have 
you been doing? 


Creating Graphics for the Web 


www.widearea.co.uk/designer 

Although this is a relatively compact site, it’s dedicated 
to the issues of Web graphics. It discusses the 
differences between file formats, creating graphics that 
react to mouse events with JavaScript, talks about 
Image Maps and buttons and even offers tips on 
optimising Photoshop and other graphics programs for 
the Web. 


View point 


www.view point.com 

Formally known as Metastream, Viewpoint can bring an 
exciting, 3D-based experience to your Website. 
Whether you need to showcase products or want to show 
off your 3D models, download the free Scenebuilder 
application and take your site into the third dimension. 


Adobe 


The home of GoLive has a lot more to offer than simply being a 
product showcase. Check out the great tutorials and user forums. 
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Discuss all kinds of graphic and Web design issues at our 
forum. Pitch a question to us, or simply browse and learn. 


Cycore 

www.cult3d.com 

Ina similar vein to Viewpoint, Cycore offers solutions 
that make putting 3D on your site a piece of cake. The 
popular Cult3D Designeris a free application that 
enables you to import your 3D models, add interactivity 
using JavaScript and then export them ready for use on 
your site. A simple solution to a tough problem. 


Flash Kit 


www.flashkit.com 

Let’s face it, Flash is awesome, but it can also be a pain 
in the neck. If your ActionScript is acting up, or your 
tweening is tumbling, Flash Kit is the ideal site. 
Updated daily, you won't find a more comprehensive, 
definitive Flash resource on the Web. Chock full of 
downloads, tutorials and news. If you use Flash, then 
you need to go here. 


Corel Designer.com 


www.designer.com 

Corel’s answer to Creative Pro. It is hosted with the 
intention of assisting and inspiring Corel product 
users, although much of the advice can be adapted to 
other programs. Now that Corel has acquired Bryce, 
KPTand Painter, this site is very much a rival to 
Adobe.com in terms of value. 


Free Graphics 


www.freegraphics.com 

Although most will want to design and use their own 
graphics within a site, sometimes if the creative juices 
aren't flowing, or you don't have the time, clip-art can 
be extremely handy. Free Graphics links to some of the 
best free clip-art graphics on the Web. 


3D Café 


www.3dcafe.com 

For anyone interested in 3D, this site has an abundance 
of models, tutorials, textures and plug-ins. Chat to 
other 3D gurus in the forums, log in to the VIP lounge 
or simply browse for 3D models. 


Cooltext.com 

www.cooltext.com 

Why waste time designing your own logo when this 
handy site will do it for you? Choose from 21 basic 
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styles and then customise your choice online to create 
logos that are anything but mundane. A great way for 
beginners to create custom graphics. 


Photo Secrets Stock and Royalty Free 
Photographs 


www.photosecrets.com/links.stock.html 

Stock images are all over the Web, but sometimes you 
just need a helping hand in finding them. Luckily this 
resource comes up trumps and provides links to all the 
major stock companies on the Web. The perfect place 
to start looking for those images that add a touch of 
professionalism to your site. 


Clip Art.com 


www.clipart.com 

Although free clip-art may not be the way to add 
originality to your site, it’s certainly a good way to keep 
costs down when you're getting started. This is another 
excellent links site that provides access to dozens of 
other sites containing millions of items of clip-art. A lot 
of it may be a little cheesy but you never know just what 
you might find. 


Computer Graphics Resources 


www.nerdworld.com/users/dstein/nw 405.htmt 
Poor design makes this site tedious to browse through, 
it hosts a huge list of computer graphics related 
resources, including individuals, companies, 
chatrooms, articles and more. There are also many 
related topics, such as animation, graphics hardware 
and virtual art, each of which also has their own 
extensive directories of contacts. 


Optimising Web Graphics 
http://webreference.com/dev/graphics 

One of the key elements of Web design is optimising 
your graphics so that they load quickly and your visitors 
don't lose patience. This can be tricky considering that 
visitors to your site will be connecting at different 
speeds. Luckily, help is at hand as Web Reference.com 
guides you through the entire process. 


Promote your site 


NetMechanic 

www.netmechanic.com 

Net Mechanic is a truly fantastic resource that will 
save you a huge amount of time when building and 
trying to promote your site. The company specialises > 


WEB 
LEARNING 


All sorts of Dreamweaver, Flash and Director-related gubbins is 
available at Macromedia's dynamic home page. Buy, browse or 
look for the latest news. 


Web Design Special | 83 | 
arts 


a 
= 
3 
Oo 
3 
= 


3D Café is the ideal place to gather 3D models, tutorials and 
textures. Delve into the thriving community gallery to see what 
professional 3D artists are currently thinking. 


in products that monitor your site, reporting any errors 
to you before your visitors come across them. There’s 
also a one-click HTML error check here - perfect for 
optimising code. 


Submit It 


http://free.submit-it.com 

Just how do you expect your site to get noticed if you 
don't submit it to a search engine? But, one problem, 
there are hundreds of search engines out there and 
targeting them all could be extremely time-consuming. 
Well, for a small fee, the professionals at this site will 
do it for you. 


Introduction To Search Engine Design 


www.searchenginewatch.com/webmasters/ 
intro.html 

So you've submitted your site to a search engine, but 
when you search for it, it appears at around 100th 
place. This is not good enough and truly annoying, so 
what next? Well you'd be advised to take a look at this 
site as it’ll show how you can move your site into the 
top two results. 


Promoting Your New Website 


www.bygpub.com/webpromotion 
Getting your new Website known and recognised is a 
task in itself. Don't try to figure it all out on your own 


‘Submit 


Submit Itt: Overview 


Tools Only 
Get Listed on Search Engines and birectortes s D 


Why Submitie? 


Submit your site to many a search engine at [w] 
http://free.submit-it.com/and see your hit count go through 
the roof. All for a small fee, of course. 
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though - this great site covers a multitude of topics 
including search engines, linking and so on. 


Reference and training 
Grafx Design 


www.grafx-design.com/tutorials.html 

Providing tutorials on specific applications such as 
Photoshop, CorelDRAW and Paint Shop Pro, Grafx 
Design contains some great advice on making your 
Web graphics a whole lot prettier. There’s also some 
general tutorials here covering such Web-essentials as 
animated GIFs and Web-safe colours. 


Creating Killer Websites 


www.killersites.com/core.html#top 

Although this site is actually an advert for the second 
edition of the best-selling book Creating Killer 
Websites, the site includes a generous number of | 
design tips from the book. Even if these don't tickle your 
fancy, this site is genuinely appealing to look at, unlike 
so many sites purporting to provide Web design 
services or tips. 


The DTP/HTML Tutorials 


www.dtp-aus.com 

Designing the layout of a Website involves many of the 
same principles as laying out material for print - that’s 
why this handy site concentrates on providing advice 
on learning the fundamentals of good page layout. 
Once you've grasped this, head over to the HTML 
tutorials section of the site and apply these freshly 
learnt design rules to your Websites. 


The HTML Learning Centre 


www.w8nation.com/resources/learning/html/ 
index.html 

A fantastic site for anyone wanting to learn or brush up 
on HTML. A plethora of tips, tutorials and downloads 
await, all aimed at making your coding life much easier. 
The site also features links to JavaScript resources and 
much more. 


Art and the Zen of Websites 


www.tlc-systems.com/webtips.shtml | 
There aren't many sites that combine philosophy with 
humour and practical advice, but this is one of them. 

Art and the Zen of Websites is a practical, pragmatic 

(yet not too lengthy) look at what makes a great Website | 
and what doesn't, and why. It’s full of advice and 
statements such as: “Please, please, please don't put 
animated images on your page. They’re the closest 
thing the Web has to computer viruses.” 


Steele's Docs and Tutorials 


www.geocities.com/SiliconValley/Park/9784/ 
tut.html 

If you're serious about graphics, you may actually want 

to write your own 3D graphics applications. This siteis | 
filled with tutorials on the science and techniques for 
coding every conceivable type of graphics engine, 

from games to professional rendering engines for | 
ray-tracing packages. Heavy going, but fascinating stuff. | 
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[w] www.webdeveloper.com is the hub of a vast network of Web 
experts who are only too happy to provide you with tips and help 
on every conceivable aspect of Web design. 


How Stuff Works: Web Pages 


www.howstuffworks.com/Web-page.htm 

It’s not really that taxing to figure out what this site is 
about, but some of you may be struggling with all the 
jargon on the Web at the moment. Well, this site is a 
godsend for you as the basics of the Web are explained 
in clear, concise language. One for technophobes, but 
interesting nevertheless. 


WebDeveloper.com 


www.webdeveloper.com 

An amazing number of people out there are freely 
providing huge amounts of design and programming 
knowledge. This website is the hub of a vast network of 
Web experts who are only too happy to provide you 
with tips and help on every conceivable aspect of 

Web design, from search engines to colour schemes 
and beyond. 


The Source for Java Technology 


http://java.sun.com/docs/index.html 

There are some first-rate Java reference sites on the 
Web, but this is one of the more scholarly, catering for 
experienced Java coders. There's comprehensive 
documentation covering the language, as well as 
detailed specifications explaining the real nitty-gritty, 
Before you buy any books on the language, check out 
this site. 


Hex Colour Chart 


www.sunyit.edu/~ vankuyw/html-ref/color.html 
When you're determined to write in HTML, even simple 
things like specifying the colour of items on the page 
can be a problem if you don't have access to a full 
Hexadecimal colour catalogue. Now you do! Now if 
someone can tell me what Papaya Whip and Navajo 
White look like please... 


The Pixel Foundry 


www.pixelfoundry.com 

Providing a wealth of tips, tutorials and advice on the 
king of all image-editors, Photoshop, Pixel Foundry 
starts where Photoshop's own manual left off. From 
beginners stuff such as creating basic Web graphics to 
more advanced tutorials on masking and so on, the 
Pixel Foundry is an essential resource. 


Design Sphere contains a wealth of tips, graphics FAQs and 
online magazines. If you're into the Web and its huge 
possibilities then this is the place for you. 


Design Sphere 


www.dsphere.net 

Another comprehensive site, Design Sphere contains a 
wealth of tips, graphics FAQs called The Stacks, a 
business directory, showcases and online magazines. 
Make a point of checking out the superb Fonts and 
Typography section of the site - it contains links to 
many, many sites featuring excellent fonts that are for 
sale and download. 


Web Reference 


www.webreference.com 

There are so many facets to designing a Website, 
including psychology, marketing, design, programming, 
funding, new technologies and security. This extensive 
site hosts FAQs, professionally-written articles, design 
tips, downloads, resources, programming advice and 
lots more. 


The Complete Webmaster Resource 


www. biginfo.net 

When you've found your feet in the land of Web design 
and need to advance to the next level, The Complete 
Webmaster Resource website is the next port of call. 
The clean design complements the plethora of 
easy-to-understand tutorials which range from 
advanced HTML to DHTML and Cascading Style 
Sheets, plus advice on creating a successful site. 


Scott's Tutorials Hotlist 


http://cires.colorado.edu/people/peckham.scott/ 
tutors.html 

Okay, we know it’s not the prettiest of sites, in fact it’s 
just a bunch of hyperlinks, but it’s what these actually 


link to that makes this part of Scott’s site so interesting. 


Links to tutorials to help you get to grips with all kind of 
stuff including HTML, Java and even UNIX prove to be 
extremely handy indeed. 


3D Tutorials 


www.ruku.com/3d.html 

There’s no end of material helping you to learn 
Photoshop, but 3D tutorials are much thinner on the 
ground, which is why this site is such a valuable 
resource. It covers a number of 3D programs including 
RayDream, Infini-D, Poser, Lightwave, 3D Studio and 
Bryce. Some of the tutorials can be applied to other 
programs as well. 
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If you're into the technical side of the Web, visit The World Wide 
Web Consortium at [w] www.w3.org. You'll find a vast amount of 
info on such formats as XML, SVG as well as some interesting 
new developments. 


3D Artists 


www.raph.com/3dartists/artgallery 

This is a great site for anyone hoping to work in the 3D 
industry. It contains a gallery displaying over 640 
pieces of work and, believe us, the standards are high. 
However, if you’re brave enough, you can submit your 
own work. There are also tutorials on Lightwave, 
Softimage, and 3D Studio MAX, a job centre and 
interviews with successful 3D artists. 


3D World 


www.3dworldmag.co.uk 

Find out all the latest 3D news, browse an extensive 
gallery of inspirational 3D digital art and check out a 
banquet of useful resources such as free 3D models 
and textures. Pick up professional tips and follow the 
tutorials in the Workshop section - all at Computer 
Arts’ sister magazine’s Website. 


3D Animation Workshop 


www.webreference.com/3d/indexa.html 

If 3D modelling is exciting but complicated, that’s 
nothing to the challenge or rewards that come from 
animating. This site has a comprehensive and ongoing 
3D animation tutorial in which you can learn how to 
make the best of your 3D software. 


Multimedia 


Crescendo 

www.liveupdate.com 

Crescendo is one of the Web’s most popular music 
players. Webmasters can use it replay MIDI files and 
MP3s. Users can download the player software and 
change the skin of the jukebox to suit their mood. This 
is where you'll find the player and the Webmaster's 
hosting scripts. 


Real Networks 


www.real.com 

Video adds immediate impact to your site and 
RealPlayer is one of the most popular decoders when it 
comes to Internet streaming video. At this site you can 
also buy the encoder software as well as tools to 
incorporate streaming video directly into your own 
Website. It isn’t particularly easy though, so don't 
expect instant results. 


DV World 


www.dvworld.co.uk 

At dvworld.co.uk, you'll find information on all sorts of 
digital video-related applications and technologies. 
You can also chat in the forum about the future of 
streaming video or any other topic you wish to raise. 


Webmonkey 


http://hotwired.lycos.com/webmonkey/ 
multimedia 

At the truly inspired Webmonkey site you can learn all 
about adding a touch of class to your site. No one likes 
too much multimedia, but with the Webmonkey’s 
advice you'll learn how to incorporate the correct 
amount - making your site one to die for. The site also 
provides many intelligent and well-written essays on 
diverse Web-related subjects. 


Official organisations 


The Association of Internet Professionals 
www.association.org 

The Association of Internet Professionals is the leading 
professional association of the Internet industry. It 
exists to unify, support and represent the global 
community of Internet professionals. The organisation 
also serves as a forum for the ideas, people and issues 
shaping the future of the Internet industry. 


The International Webmaster’s 
Association 


www.iwanet.org 

If you're serious about working as a Web designer, 
membership of this organisation is recognised and 
valued the world over. With chapters all over the world, 
this organisation provides education and fosters 
advancement in the field of Web design. 


The World Wide Web Consortium 


http://www.w3.org 

The World Wide Web Consortium develops 
technologies to make the Web a more usable and 
exciting place. Two technologies that have emerged in 
the past are XML (Extensible Markup Language) and 
SVG (Scalable Vector Graphics). It’s always worth 
checking to see what the latest developments are. EE 


na ayer & Pais . Try GoldPass Free for 30 Days 


LAUNCH.com 


The home of RealPlayer and many other streaming media 
development tools, Real.com is an essential place to visit in 
light of the streaming media phenomenon that's currently 
embracing the Web. 


Illustration: Bryn Owens [e] bluntdog@freeuk.com [t] 0788 758 7448 
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Expertise provided by Mat Broomfield, 
fe] math@cix.co.uk (t] 01268 415110. 


The best free 


Web design tools 


The Internet is brimming over with great 
tools to help you create stunning Web 
sites. Here are some of our favourites... 


can also be arduous trying to 

come up with something that’s 
useable, professional and original. Luckily, 
there are thousands of tools available to 
help you — some are free, some are 


A esigning for the Web is 
Ag tremendously enjoyable, but it 


shareware and all are available to download. 


There are tools to design menus and 
buttons; tools to check your HTML code; 
tools to optimise your images and tools to 
create beautiful but meaningless graphics 


and animations. Uncovering some of this 
can be inspiring, and even if you don't use 
the majority of these tools, you can still get 
some great ideas by knowing about them. 

We must just offer you one piece of 
advice: if you discover a seemingly great 
Web tool, go to its author’s home page. If 
the tool hasn't been clearly used to design 
the page then don't bother. 

If it isn't fresh, effective, powerful or fast 
enough for its author, it won't be good 
enough for you either! > 
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Formula Software Pty 


www.buttontool.com 


Shareware 


Full product Price 


$29.95 


Fully functional but online applets 
are watermarked ‘Unregistered’ 
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Create compact and user-friendly menus and 
elevate your site’s professionalism with 7 Cool 


Button Tool. 


f you’re coding in HTML or 
Wl you're using an older authoring 
af package, you might be having 

difficulty creating interesting buttons. If 
so, then this nifty program should go 
some way towards solving the problem. 

1 Cool Button Tool enables you to 
create individual buttons or banks of 
them arranged according to your 
specifications. You can add bitmaps, 
assign sounds and define different 
configurations for each button state. At 
any time you can preview how your 
button/s will look and behave. 

Once you've created your buttons, 
the program will create an easy-to-use 
Java applet. The entire process 
requires virtually no knowledge, yet it 
will enhance the professionalism and 
sophistication of even the humblest 
Web site. And you won't build up 
the large file sizes of some of the 
more comprehensive Web page 
menu systems. 


Verdict 


SIRI 


DJJ Holdings 


www.swishzone.com 


Shareware 


Full product Price 


$30 


Fully functional but export disabled 


Create impressive Flash-compatible text 
effects quicker and more easily than with 
Flash thanks to Swish. 


Swish 1.51 


lash has revolutionised the 
WF Web by providing animation 
Pe without the download time. 
Now Swish enables you to create Flash 
animations without Flash. 

In actual fact, the program focuses 
purely on creating text animations, and 
these can be used standalone or 
imported into Flash to use as part of a 
larger project. 

Its main strength is the fact that it’s 
easier to use than Flash, so you can 
create impressive animations more 
quickly. It uses the same timeline- 
based approach as Flash and comes 
with lots of presets that you can apply to 
create effects in just a few mouseclicks. 

You can choose from a variety of 
events to create interactivity for your 
viewers, or you can create purely 
passive experiences that inform, 
entertain or promote. 

Swish is remarkably inexpensive yet 
surprisingly powerful. 


Verdict 


SIRI 


1st Riada Headline Tool 1.12 


Riada 


www.riada.com 


Shareware 


Full product Price 


$42 


Fully functional but displays 
online advert 


Ist Riada Headline Tool enables you to 
create compact and informative 
text-based animations. 


Web Design Special 


dding animation to your site is a 
iA great way to attract attention 
{ but it's easy to get carried away 
and create a movie that chokes up 
bandwidth without supplying much 
useful information. 

This cool program enables you to 
create scrolling text messages ina 
variety of styles. The simplest style is a 
basic vertical scroller but by changing a 
few parameters you can easily add 
teletype-style screen printing, fades 
and more. 

One really easy but effective 
technique is to import a masked 
picture, and scroll your text behind it. 
The program enables you to include 
tags such as the date and time so that 
your message is personalised for each 
viewer. It has many other options too, 
and the program is surprisingly 
versatile considering its brief. 

A useful and speedy alternative to 
graphical animation. 


Verdict 


SIRI IIE 


3D Web Button 1.5 


Rudenko 


www.rudenko.com 


Shareware 


TRAE EUR ON EO RATERS EE 
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Even if you own a decent graphics program, 
3D Web Button Tool provides a very quick and 
easy means of creating great-looking buttons. 


" hereas 7 Cool Button Tool 
focuses on the functionality 
4 of your Web buttons, 


this program is more concerned about 
their appearance. It primarily focuses 
on generating great-looking 3D 

text buttons. 

The entire process is performed 
Wizard-style by proceeding through a 
series of sequential tabbed sections. 
You start by specifying the text and its 
colour then you move on to font 
refinements. You can use the small 
selection of textures and button shapes 
that are included, but the program's 
only real weakness is that you cannot 
import additional material easily. The 
textures are stored as JPGs so you can 
add to them, but the shapes are ina 
proprietary format. 

3D Web Button’s strength is its 
ability to quickly create great-looking 
buttons complete with bevels and 
extruded, textured text. 


Verdict 


SI 


Anfy 1.4.5 2 


Anfy Team 


www.anfyteam.com 


Shareware 


Fully functional but online users see 
a pop-up advert 
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Few tools provide you with the ability to create 
so many useful, visually pleasing and diverse 
Java effects as Anfy. 


one fault, it’s that it’s become a 
af victim of its own success... Anfy 
effects like rippling reflections can be 
found everywhere, reducing their 

overall impact. 

Nevertheless, like many overused 
graphics tools, Anfy can still add real 
class to your site if applied judiciously 
and subtly. It provides functional tools 
to create menus, banners, scrollers 
and slideshows, while at the other 
extreme, it can create graphical follies 
that move around and serve a purely 
decorative purpose. 

Most effects can be created using 
multiple choice Wizard-style 
operations. Each effect has parameters 
that can be customised to your own 
preferences and samples are provided 
so that you can see what they look like 
in advance. Anfyis the most 
comprehensive Web design tool in the 
public domain and it’s fun to use too. 


Verdict 
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Digital Dutch 


www.digitaldutch.com/arles 


Shareware 


Don't waste hours creating and recreating 
online image catalogue pages when Web Page 
Image Creator can do it for you with ease. 


f you want to share a library of 
HT images with people over the 
‘ Internet, presenting them ina 
user-friendly manner can be a problem, 
unless your guests are prepared to wait 
for ages waiting for pages to load. 

Help comes in the form of this 
elegant program, which enables you to 
organise and present your collection 
with the minimum of fuss. 

It provides a standardised 
presentation format consisting of a 
scrollable preview bar showing 
thumbnails of the images in the gallery. 

These may be resampled to provide 
maximum quality at reduced sizes. 
When the user clicks on one of the 
images, it is displayed in the main 
portion of the window. 

You can make a number of 
adjustments to the format, and include 
back and forward buttons as an 
alternative form of navigation. The 
program is effective and quick to use. 


Verdict 


SIDED 


CoffeeCup <HTML> Editor 8.7 (2) 


CoffeeCup Software 


www.coffeecup.com 


Shareware 


Full product Price 


$49 


Fully functional 30 day trial 


There are many powerful HTML editing tools, 
but CoffeeCup HTML Editor provides a good 
number of features at a give-away price. 


ust because you want to code 
( your pages by hand rather than 
af leaving it to a drag-and-drop 
graphical editor, it doesn’t mean that 
you have to sacrifice the niceties. With 
the CoffeeCup HTML Editor, you get a 
very fully featured piece of software at 
a bargain price. 

The program sports a live preview, 
syntax highlighter to make your code 
easier to read, an integrated dictionary 
and 30,000 word thesaurus and great 
support for additional dialects such as 
DHTML, XML and more. If all that 
wasn't enough, it also comes with 125 
JavaScript applets and effects to add 
extra spice to your Web pages. 

Once you've finished writing, the 
code cleaner will optimise your work, 
then you can use the program's FTP 
functions to upload new pages and 
media to your site with minimal effort. 
This is a comprehensive and powerful 
coding tool at a bargain price. 


Verdict 


SEI 


Image Mapper ++ 4.00a 


Company 
CoffeeCup Software 


Website 


www.coffeecup.com 


Type 
Shareware 


Full product Price 
$20 


Restrictions 


Fully functional 14 day trial 


Add a touch of pizzazz to your pages by using 
Image Maps instead of regular buttons. Image 
Mapper is one way of building them. 


s Flash interactive mappers will 
( a know, you can add interest to 
af your Web site, and interactivity 

to your Web page by using pictures 
divided into zones for navigating. 

Clicking on different areas of an 
aerial photo of the world might take 
you to country-specific material for 
instance. This technique requires an 
Image Map and it offers a higher level 
of interactivity and creates a more 
engaging experience for your viewers. 

Which is the handy service offered 
by this basic program — it enables you 
to create Image Maps using any image. 
You can define them using rectangles, 
circles or irregular polygons, but the 
latter option is the one you'll use most. 

Once you've defined your areas, 
you can also define the URL that the 
map leads to, and any accompanying 
text that pops up as the user passes 
their cursor over an area. Image 
Mapperis simplistic but functional. > 


Verdict 


DDK 
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eNavigator Suite 2000 6.5 


An auto-indexer helps visitors find what they're looking for in minutes 


Company 


AusComp 


Website 
Wwww.auscomp.com 


Type 
Shareware 


Full product Price 
$1499 


Restrictions 


Fully functional 30 day trial 


f you’re creating a business, 
informational or educational 
site, it’s very important 

! that your users can easily 
access the information they need. 

This goes beyond mere navigation, 
which tools like AllWebMenus and 1 
Cool Button Tool address well. We're 
talking about information presentation 
and accessibility. 

On one level, eNavigator Suite 2000 
is just another menu design tool. It gives 
you the opportunity to design vertical or 
horizontal menus complete with flyout 
or dropdown sub-menus. Alternatively, 
you can use Photoshop-style tabs to 
provide access to different areas of your 
site, or you can opt for a tree structure 
like Explorer uses. You can even 
combine menu styles. 

So far, there's little that other 
navigation programs can't offer equally 
well. eNavigator starts to pull away from 
the competition when it comes to data 


access, enabling users to find the areas 
of your site that are of interest to them. 

The program includes an 
auto-indexer that quickly scans your 
site for all links, enabling it to generate 
a site map with minimal effort. It also 
includes a number of search engines 
that can be used to trawl through your 
site looking for documents, help files, 
images and more besides. You can 
even incorporate a search facility that 
will search the Internet using 
user-defined engines. 

eNavigator is also hot on security, 
and it provides the facility to password- 
protect pages or content within your 
site. The program offers you the ability 
to customise the look of your site and 
the pages within it. You can select from 
a number of themes, including finance, 
kids and high-tech. You can even 
change the graphics and sound files 
used to generate the themes to create 
entirely new ones of your own. 


Transform your Web site’s front end and create 
a navigation system that guides people to the 
information they want with minimal fuss. 


A comprehensive interface and 
navigation design tool, eNavigator Suite 
2000, will increase the friendliness and 
useability of your site, whether it’s on 
the Internet, an Intranet or an Extranet. 


Verdict 
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NewMediaCafe 


www.newmediacafe.com 


Shareware 


Full product Price 


$14.95 


Limited to a few uses and no colour 
values given 


Choose Web-legal colours or work out the 
perfect colour scheme for your Website with 
Color Studio Pro. 
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iguring out what colours 

work with which browsers can 
be a confusing area for 
designers — which is where Color 
Studio Pro comes in. The program only 
ever provides you with Web-legal 
colours, whichever mode you're in, so 
you can be sure that they'll look right on 
any browser or computer. 

One of the most interesting modes 
is the Moods Selector, whereby you 
select a mood - energetic, peaceful, 
elegant and so on - and the program 
provides a series of colourways that 
reflect the theme. 

Another useful tool is the Colour 
Picker with which you can find out the 
nearest Web-legal colour to any colour 
selected from one of your own images. 
The trial version of CSPro is too 
restricted and virtually useless, but the 
full version only costs $14.95 — a 
bargain price for perfect Web colour 
schemes every time. 


Verdict 


SEDI 


HTML Font and Body Tag Wizard 


Jeff Carpenter 


No Web site 


Freeware 


Full product Price 


Free 


Reduce the tedium of repetitively typing font 
and body tags by copying HTML straight into 
your document. 


t's the tedious repetition 
| that quickly drives you crazy 
: when you're hand-coding 


HTML, and few things are more 
repetitious than having to specify font 
tags every few lines. 

This basic but invaluable program 
provides you with a font preview 
window in which you can choose the 
font settings you want. 

It then automatically generates the 
required HTML code which you can 
cut-and-paste into your code editor. 

The program supports colours, sizes 
and styles. When choosing a font, you 
can also specify alternatives for 
systems that don't include the required 
font. The program also enables you to 
specify body tags such as the font 
colour, visited and unvisited links. 

You can also choose to preview body 
copy against a plain coloured 
background or an image of your choice. 
A simple but useful tool. 


Verdict 
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Guestbook Star 


WebGenie Software 


www.webgenie.com 


Shareware 


Full product Price 


$49 


Fully functional 30 day trial but must 
use WebGenie's server 
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Find out what your audience thinks and enable 
them to leave a sign of their passing with 
Guestbook Star. 


guestbook is a great way to 
AY monitor interest in your site and 
r.' receive direct feedback from 


your visitors. Unlike many guestbook 
solutions that insist on splashing 
advertising all over themselves, or 
hosting it on a really busy server that 
people get bored waiting for, Guestbook 
Star provides you with the option of 
using their server or your own. 

It enables you to create a very simple 
guestbook, complete with predefined 
fields. You can opt to hide the entire 
guestbook from visitors, or just certain 
fields such as the Email field. 

Guestbook Star also provides 
you with the option to send out an 
automatic response to all guestbook 
signatories. The program will also 
optionally notify you whenever a visitor 
signs your guestbook. 

Guestbook Star is less sophisticated 
than some guestbook programs, but it 
does the job. 


Verdict 


DIDI 


Homepage Upper 3.1 


TeuchiSoft 


www.teuchisoft.com 


Shareware 


Full product Price 


$19-89 


Fully functional 30 day trial 


REGHGRGEEGEEERREEEE 


Reduce the amount of effort it takes to 
maintain your Website with Homepage 
Upper’s smart automated uploading. 


he larger your Website 
becomes, the more tedious it 
F becomes to upload all the files 


that are needed whenever you create 
changes. Homepage Upper is an 
intelligent tool that automates the 
entire process. 

Simply tell the program where your 
site is stored locally, then connect and 
point it at your Web address. It will 
compare all files and automatically 
update any when you create newer 
versions. It will also detect any filename 
changes and rather than wasting time 
deleting and uploading identical files, 
it'll simply rename the files on your 
Web server. 

One particularly nice feature is the 
way that Homepage Upper performs 
intelligent updates to minimise the risk 
that people visiting your site during an 
upload will encounter incomplete links. 
This is a great tool, especially for 
anyone who does the job manually. 


Verdict 


SiC 


Applet Marquee Wizard 3.52 


CoffeeCup Software 


www.coffeecup.com 


Shareware 


Full product Price 


$25 


Fully functional but export disabled 


A picture may speak a thousand words, but 
sometimes only words will do, and that’s when 
you need Applet Marquee Wizard. 


lig nthe Internet, it isn’t enough to 
(8) simply shout: “We are great!” or 
af “Learn this!” and hope that 
people will take your message onboard. 
You’ve got to catch people's attention 
and arouse their interest. 

Applet Marquee Wizard enables you 
to create a variety of static and 
animated banners that will help you to 
say what you have to say. It’s a 
surprisingly simple tool that enables 
you to import pictures, perform 
transitions and create clickable zones. 
One of the key benefits is that you can 
create impressive transitions without 
having to store each frame, so you don't 
build up the file overhead. Your projects 
are created as a series of slides and you 
can define up to ten hotspots on each 
image, each of which performs a user- 
definable function such as linking to 
another page or offering hints. Marquee 
Wizard performs an important function 
and does it well. 


Verdict 


DiS 


Image Vice (21! 


BoxTop Software 


www.boxtopsoft.com 


Shareware 


graphics files. Create smaller graphics files 
without losing quality by using /mage Vice. 


Reduce download times by creating smaller 


(though communication 
A speeds are improving, you'll 
; still be very mindful of the 


size of any graphics files that you 
place on the Web. 

Here’s a tool that enables you to 
reduce your images by up to 70 per 
cent with no visible drop in quality. 

Image Vice is a Photoshop- 
compatible plug-in that enables you to 
reduce the number of colours in an 
image. It works on any RGB image 
format, and provides six different 
controls for adjusting the way that an 
image's palette is reduced. 

This means that you have far greater 
control than with other reduction 
options, such as the one included with 
Photoshop, which basically amounts to 
little more than dithering. 

The resulting images come in many 
different formats, all with fewer colours 
and smaller file sizes, but with little or 
no reduction in quality. > 


Verdict 


Se 
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Well, we said there were thousands of useful tools out there — so here’s a few more... 


Applet Text House 

PC 

Btext Software 

[w] www.btext.com 

Shareware 

Restrictions: Fully functional but 
carries a small logo 

Full product price: $19.95 


Here's another nifty tool for creating 
Java banners. It can do static, scrolling 
and animated text. You can scroll in any 
direction, or you can use a typewriter 
effect. You can include background 
graphics or move graphic objects 
around with your text. You can also 
incorporate animations and sound, and 
you can even do mouse rollovers. 
Unfortunately it isn't possible to change 
fonts, which is a pain. The program is 
entirely controlled from one simple 
screen. It’s versatile and easy to use. 


ProJPEG 5.0 

PC 

Boxtop Software 

[w] www.boxtopsoft.com 
Shareware 

Restrictions: Export disabled 
90 day trial 

Full product price: $49.95 


This is an essential tool for anybody who 
uses JPEG images on their site. It's a 
Photoshop-compatible plug-in that you 
access when you save a file. It gives you 
a far more powerful JPEG export, with 


Create the most compact possible JPEG files 
while retaining the highest possible quality 
with ProJPEG. 


Web Design Special 


additional compression options. You 
can even tell the program your required 
file size and it'll make the required 
quality adjustments to achieve your 
target. ProJPEG is a powerful Web 
design ally. 


PopUp Menu Creator 3.5 
PC 


Lefteris Haritou 

[w] http://popup.jscentral.com 
Shareware 

Restrictions: Fully functional but 
carries a copyright message 

Full product price: $20 or $100 


Yes, it’s yet another menu creator and 
although PopUp Menu Creator doesn't 
do anything that the others don't, what 
makes it special is the fact that it’s so 
easy to use and has such a simple 
interface to understand. 

It creates buttons, complete with 
submenus, graphics and sounds. It has a 
live preview and it creates neatly 
packaged Java code for you at the end. 
Undoubtedly the simplest menu creator 
we've encountered. 


Internet Scene Assembler 
PC 

Parallel Graphics 

[w] www. parallelgraphics.com 
Demo 

Restrictions: Limited libraries and 
completed projects cannot be 
published to the Internet. 

Full product price: $179.95 


When you want to take your Web site 
into the third dimension, Virtual Reality 
Modelling Language (VRML) is one of 
the most popular choices. 

With Internet Scene Assembler you 
can construct 3D models and build 
passive or interactive 3D environments 
that can be delivered via the Internet's 
narrow bandwidth. 

The program is ideal for product 
visualisation, architectural displays and 
educational projects. 


Alto MP3 Maker 

PC 

YuanSoft 

[w] www.yuansoft.com 

Shareware 

Restrictions: Only first 12 tracks of an 
album may be encoded 

Full product price: $19.95 


Now that MP3 audio files have become 
so widespread on the Internet, it's a 


great way to deliver audio to Net surfers. 


Whether you're releasing a copy of a 
music track you've written or you're 
using a copyright-cleared track from a 
commercial CD, Alto is a perfect 
solution. It lifts the tracks from CD in 
their raw format, then encodes them 
into MP3 format. Minimum quality 
reduction; no recompression; no fuss - 
just what you need. 


Site Sponsor 

PC 

Web Genie 

[w] www.webgenie.com 
Type: Shareware 
Restrictions: Fully functional 
30 day demo 

Full product price: From $79 


Unless you've got a big budget, it can be 
a real challenge to promote your 
Internet venture, but Site Sponsor 
enables you to set up an affiliate 
program that rewards other Web hosts 
for carrying links to your site. 

Site Sponsor generates the 
instructions and the CGI that 
enables interested parties to join your 
program, and it will even generate 
reports so that you can see whether 
referred surfers become customers, 
enabling you to create a tiered reward 
structure. Invaluable. 


Image Mapper 

Mac 

Stuart Snadden 

[w] www.des.gla.ac.uk/~snaddosg 
Shareware 


Restrictions: Fully functional but 
features annoying messages 
Full product price: $15 


Savvy Mac owners who want to create 
Image Maps are lucky enough to have 
this cool program which is actually far 
better than /mage Mapper ++. For 
starters you can import HTML, CERN 
and NCSA. The program also provides 
graphical and textual methods of 
creating Image Maps. The program 
supports Java-highlighted Image Maps 
and you can test your maps before you 
save them. Image Mapper is straight- 
forward and does what you want it to. 


Site/C 

PC 

RoboMagic Corp 

[w] www. locutuscodeware.com 
Shareware 

Restrictions: Fully functional 
30 day trial 

Full product price: $20 


You've spent hours creating the perfect 
site and the last thing you want is for 
people to be prevented from seeing it 
as you intended. Whether they're kept 
away by frequent server downtime, or 
hackers have made changes behind 
your back, or you’ve made simple 
coding mistakes that prevent access, 
you'll want things fixed and quickly. 

Site/C monitors any site you 
designate and can automatically notify 
you by email or even by pager if 


Don’t let Internet vandals or poor server 
service ruin your online business. Site/C 
ensures that always know what happening to 
your site. 


Now that the rest of your site has been 
optimised, ensure that your HTML documents 
are as small as humanly possible too thanks to 
HTML Shrinker. 


unexpected changes or downtime 
occurs. It can also produce a log so that 
you can find out just how reliable your 
ISP is. A life saver. 


CyberSpyder Link Test 2.1.12 
PC 


Digital Dutch 

[w] www.cyberspyder.com 
Shareware 

Restrictions: Fully functional 
60 day trial 

Full product price: $35 


The larger your site, the easier it is to 
overlook a broken link, but not with 
CyberSpyder Link Test. It will work 
with sites of all sizes from a single 
page to thousands of pages. It will 
check each and every link, and URLs 
can be included or excluded. It will 
then produce a detailed report, 
including a site structure map. It’s 
such a simple tool but it can make such 
a big difference. 


HTML Shrinker 1.07 

PC 

Harold Heim 

[w] http://thepluginsite.com/ 

Type: Linkware 

Restrictions: Fully functional but you 
must include a link to the publishers 
Full product price: Free 


In an environment where every extra 
byte of information increases the 
likelihood that your potential audience 
will vanish before they even see what 
you have to say, reducing the size of 
your HTML files is as important as 
reducing the size of your graphics. 

This brilliant program scans your 
code and removes all extraneous 
information and comments. The 
savings it achieves depends upon the 
code’s subject matter, but you can 
expect to see files shrink by between 4 
and 69 per cent. An expert tool for 
those who want to create the very best 
surfing experience. 


CSE HTML Validator 4.0 
PG 

Al Internet Solutions 

[w] www.htmlvalidator.com 
Type: Shareware 


Restrictions: Fully functional but 
limited to 50 validations 
Full product price: $129 


When you take pride in your HTML 
code, you want it to be as clean as 
possible so that it behaves as you 
expect on every platform, to say 
nothing of the time browsers can 
waste trying to parse syntactically 
incorrect documents... 

With HTML Validator you can check 
your code by dragging-and-dropping a 
HTML document. It’s fully up-to-date 
and recognises the latest syntax and 
commands. Think your code is clean? 
Think again! 


TopStyle 1.51 
PC 


Bradbury Software 

[w] www.bradsoft.com 

Type: Shareware 

Restrictions: Fully functional but 
includes nag screens 

Full product price: $49.95 (version 2) 


When you have a lot of pages to 
manage, you'll want to make life aseasy | 
as possible, so it makes sense to use 
Cascading Style Sheets(CSS). These | 
separate a page's style fromits content, | 
enabling you make stylistic changes | 
(fonts, size, justification, and so on), at 

the click of a button. TopStyle is the tool 

to help you do it as quickly and 

painlessly as possible. It can be used 
standalone or with many leading 

authoring applications. Essential for the 
canny Web designer. 


CGI Star Pro 

PC 

WebGenie 

[w] www.webgenie 

Shareware 

Restrictions: Fully functional for 
30 days 

Full product price: From $99 


If you want to stay in touch with your 
audience, you want to make it as easy as 
possible. Email is one possibility, but 


many people feel more comfortable 
with the guided interactivity of a CGI 
form or questionnaire. Fortunately 
thanks to CG/ Star Pro, it’s easy to 
create any type of CGI form, and even if 
your server doesn't have the ability to 
host CGI scripting, Web Genie will host 
for you. A useful tool when you want to 
know what your visitors are thinking. 


Site Sleuth 

PC 

WebGenie 

[w] www.webgenie.com 
Type: Shareware 


Restrictions: Fully functional for 
30 days 
Full product price: From $49 


Why just create a site and assume that 
you know how people will use it, when 
you can easily find out how they move 
around your site with this nifty program? 

Site Sleuth enables you to glean a 
wealth of information, such as the pages 
people visit, what they entered into a 
search engine to find you and which 
engine they used. | 

You can see what doesn't work and 
what downloads were aborted before 
completion. The essential tool for | 
monitoring the behaviour patterns of 
your site’s visitors. 


AllWebMenus 1.1 

FC 

Likno 

[Ww] www.likno.com 

Type: Shareware 

Restrictions: Fully functional 14 day 
trial 

Full product price: $49 


AllWebMenus initially appears a little 
daunting with a rather busy-looking 
interface, but much of that comes from 
the fact that the three button states are 
all displayed simultaneously. This is 
good for power-users who like to see at 
a glance exactly what's going on. 

The program produces very 
elegant and compact menus, which can 
have collapsing sub-menus if you so 
desire. It also enables you to use 
background images. 


Access2Web 1.2 

PC 

Springtime 

[w] http://access2web.dk 
Type: Shareware 
Restrictions: Fully functional 
14 day trial 

Full product price: $89 


You might have shunned database 
publishing in the past because it was 
too complicated, but with this program 
it’s much easier. Access2Web converts 


fa 


Save time by automating your site uploads 
with DirectFTP - you can also preview 
material directly from the server. 


your database files or Excel documents 
into HTML code. It intelligently strips 
out empty fields and will format your 
documents too. 

Although it would have been nice to 
see some kind of Web database search 
tools, the program is nevertheless a 
boon to anyone who needs to insert 
information from a frequently changing 
database into their pages. 


Riada Lock 

PC 

Riada 

[w] www.riada.com 

Type: Shareware 

Restrictions: Fully functional but 
displays Riada message to users 
Full product price: $23 


Want to password-protect parts of your 
site? It’s easy with Riada Lock. You can 
add passwords to individual files, pages 
or the entire site. Better yet, you can 
maintain a permissions list that routes 
different users to different parts of your 
site when they enter a password, thus 
personalising their access. The program 
doesn't get along with all servers, but 

if it works for you, then it’s a 
low-maintenance way of controlling 
who sees or reads what in your site. 


DirectFTP 

PC 

CoffeeCup Software 

[w] www.coffeecup.com 
Type: Shareware 
Restrictions: Fully functional 
30 day trial 

Full product price: $30 


It can be a chore to upload files to your 
Web server, but thanks to DirectFTP it 
could become a lot easier. It’s a drag- 
and-drop FTP program with a few very 
useful features, such as the ability to 
resume incomplete uploads and 
preview and even edit files directly on 
your server. No FTP program seems to 
do it all, but this has some neat features. 


WebCam 3.0 

PC 

CoffeeCup Software 

[w] www.coffeecup.com 
Type: Shareware 
Restrictions: Fully functional 
21 day trial 

Full product price: $30 


WebCam enables you to place a 
regularly updating Web camera image 
on your Web site. Specify the refresh 
speed and the way the window looks 
and the program will alert you and send 
a picture if it detects movement. Fun to 
use and cheaper than a watchman! EEE) 
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Designing Web Graphics 3 (3rd Edition) 


This ultimate guide to Web graphics justifies the hefty price tag 


Price | 
| ncisinsemnaetineinensitaninssaincnianraecinaomansis he Internet is a graphical 
£50.99 ! interface and so it’s crucial to 
parreccmeererecmeeren ee 4 ensure that each image you 
| Author ponereenrmseeare At) i design for a Web page is 


viewed at the best possible quality. 

This manual is simply the bible for 
designing online graphics. If you own 
earlier versions, you should consider 
this new edition because it contains 
additional information on handling 
graphics for Dreamweaver, as well as 
tips on ImageReady, Flash, Shockwave 
and Fireworks. 

The hefty price tag is justified as 
soon as you begin to read. Web design 
guru Lynda Weinmann presents a 
masterclass in online design that you 
will refer to again and again. 

Beginners and advanced users alike 
will appreciate the in-depth theory of 
designing graphics destined for the 
Internet, as well as other subjects such 


Lynda Weinman 
[Publisher | 
New Riders 


~ 1562059491 


as HTML troubleshooting. Full-colour 
pages explain the topics under 
discussion in each chapter and provide 
images, illustrations and screenshots to 
show you the effect each technique has 
on the graphic used in each example. 

Chapter 22 on JavaScript and 
implementing rollovers is an excellent 
example of how software manuals 
should be written. 

Basic principles are dealt with over a 
massive 27 chapters and subjects 
include colour calibration and 
animation with Flash, Shockwave and 
QuickTime. You're also shown how 
Web-based graphics are constructed 
in a wide variety of programs, and learn 
the underlying standards that govern 
those designs. 

This is the ultimate guide to 
constructing Web graphics and one that 
you simply can't be without. 


Verdict 


USUSESLSES 


Fireworks 3 Visual 
Quickstart Guide 


f a ad ‘| 
L Ne, El ( 


fter the now ubiquitous tour 
of the user interface, and a 
look at what’s new in version 
3, the author explains how 
each Fireworks tool operates in 
isolation as well as within the whole 
working environment — which enables 


[Author — 


Sandee Cohen 


[Publisher you to produce the graphics you need 
"aad J Higa maine for your Web pages. 
Peachpit Press 19 chapters divide each of 
| ISBN Se Firework’s key features into themes 
Be such as colour, working with objects 
0201704528 and pixels plus the all-important 


optimisation of your images and how to 
inject some dynamism into your pages 
with short animations. 

Beginners will find this manual 
an easy way to become competent 

with Fireworks 3 even though some 
PIPE chapters tightly condense the tutorials, 
mot Wino wd 0 which means that you need to 
a experiment in your own time to fully 

grasp the technique. This is an 
excellent reference manual for novices 
and intermediate users. 


Verdict 


SSIES 


Flash Web Design: 
_ The Art of Motion Graphics 


his book from Hillman 


| " } 

| Lu idacaticniacemetininal Curtis, one of the best 
£34.99 j exponents of Flash design, 

™ 2 | attempts to be visually 

| Author | ae 52 interesting as well as a practical 
Hillman Curtis hands-on design manual. 

Each design project is thoroughly 

[Publisher aay dissected with the aid of bold graphics 

anaes iee- a plus screenshots and well-written 
New Riders step-by-step instructions. 

[ = The main aim of this book is to 

| ISBN Pe tee | explain Curtis’ motion design 

0735708967 principles. Why does one Flash design 


work infinitely better than another? 
Over ten chapters, you see how the 
techniques that Curtis has developed 
enable Flash designs to do their job. It’s 
not for nothing that, over time, the 
author has become something of an 
online design guru. 

While this book isn't as in-depth as 
other Flash manuals, intermediate to 
advanced users will find much to 
propel their own projects from the 
mundane into the dynamic. 


Verdict 


Dreamweaver 3.0 HOT: Hands-On Training 


The emphasis is on real-world situations in this practical beginners’ manual 


£29.47 


| Author 


Lynda Weinman 


| Publisher | 


Peachpit Press 


ISBN | 


0201702762 


ven if you haven't got any 
HTML experience, you can 
still create stunning Web 

| pages if you have the 
correct tools. Dreamweaver offers a 


professional set of Web design tools but 
can seem complex to the beginner. Even 


seasoned users may lack an in-depth 
knowledge of the program. 

Enter Lynda Weinman. Not content 
with writing what is perhaps the best 
Web graphics book on the market, she 
now presents her own unique guide to 


Dreamweaver 3. The title says it all: this 


is a hands-on manual that enables you 
to learn by practical example. As 
Weinman herself states, “many 
exercise-based books take a paint-by- 
numbers approach to teaching. While 
this approach works, it’s often difficult 
to figure out how to apply those lessons 
to real-world situations.” This book is 


different in that each lesson is put into 
context so you understand why, as well 
as how to, use each technique. 

The HOT series of books also has a 
unique CD-ROM that contains 
QuickTime movies that explain those 
tricky features where a textual 
description would be inadequate or just 
plain useless. 

Weinman presents the essential 
features of Dreamweaver 3 clearly and 
concisely, beginning with an excellent 
introduction to HTML and concluding 
with advanced features such as 
behaviours and DHTML. 

Overall, the exercises in this book 
have been proven in Weinman’s own 
classroom, where novice Dreamweaver 
students have gained a thorough grasp 
of the industry's leading program. If 
you're a Dreamweaver beginner, this is 
the best manual money can buy. 


Verdict 


SEDI 


HTML for the World Wide Web 
Visual Quickstart Guide 


Elizabeth Castro 


[ Publisher 


Peachpit Press 


a 


[ISBN 


0201354934 


his latest edition of what has 
become one of the best 
introductions to the art of 
HTML coding has been 
thoroughly expanded to make it even 
more of an essential reference tool. 

Each chapter introduces a new set of 
tags, beginning with how to place 
simple text and graphics on a Web 
page, and concluding with JavaScript, 
style sheets and multimedia. The code 
is always shown alongside the resulting 
Pages so you can match the code to the 
effect in the browser window. 

Included in this edition are new 
chapters on code troubleshooting 
which look at the subtle differences 
between how the leading browsers 
handle written code. You'll also find 
information on Cascading Style Sheets 
and CGI scripts. With excellent 
appendices that cover hex colour, 
special symbols and HTML 
compatibility, the best practical HTML 
course just got even better. 


Verdict 


| 
| 


LiveMotion 


Visual JumpStart 


£14.99 


Richard Schrand 


ISBN 


0782128483 


graphics are the latest 

technologies vying for space 

within your Web browser. 
This manual is designed to teach a 
beginner all the essential skills needed 
to make the most out of the set of tools 
that LiveMotion offers. 

Hints and tips are included on every 
page to give you the inside track on 
each feature of the program. The author 
looks closely at all aspects of the 
software from setting up an animation 
timeline to importing Shockwave files 
for manipulation. 

The guiding principle of these 
manuals is to present the information 
in an uncluttered layout. Screenshots 
are large, but supported with sparse 
explanatory text which gives the 
impression that the book may have 
skated over essential information. As 
such, it’s only a brief introduction to 
LiveMotion - you'll move to a more 
detailed manual very quickly indeed. 


Verdict 


SS 


f ector-based animation and 
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Teach Yourself Macromedia 
Flash 5 in 24 Hours 
f 


sing the now familiar one 
hour lesson format, the 


£17.99 author introduces each of 
np i he 
r the key concepts int! 
{ Author Flash environment before illustrating 
Phillip Kerman them with worked examples. This is 
pee Sarah rae ae ae the perfect companion for beginners, 
| Publisher but intermediate users will also find 
Sams useful information in the later chapters, 
= which consider Flash delivery systems, 
[ ISBN CD-ROM design and how Flash 
interfaces with other programs. 
067231892X 


Divided into four sections, each 
containing a summary and Q&A 
section, this is a competent, 
well-written manual that enables you 
to learn at your own pace. Macromedia 
describes Flash as: “the professional 
standard for producing high-impact 
Web experience”. If you need to 
learn Flash 5in a hurry, but also want to 
thoroughly understand each concept, 
this book is ideal. 


Verdict 


SSDS 


Wow! Book 
[Price a 


£31.44 


Author 


Jack Davis & Susan 
Merritt 


[ Publisher 
Peachpit Press 


| | ISBN | 


0201886782 


The Web Design 


resented in landscape format 
and in full colour, this book 
offers a discussion of the 
i best in Web design, plus lots 
more. It looks at interactive digital 
media and includes chapters on good 
Web design as well as publishing, 
education and training, plus sales, 
portfolios and presentation graphics. 
Interface design is at the core of this 
book. Projects that enable the Website 
or CD-ROM user to access the site 
most successfully are showcased as 
examples to learn by. Each chapter is 
sumptuously illustrated, with captions 
and comprehensive supporting text. 
The CD-ROM contains the site files 
from the projects discussed, enabling 
you to examine each file for a clear 
understanding of the technical issues 
involved. With over 600 examples of 
interface design, this book is equally 
valuable for all levels of user. 


Verdict 


SSIS 


Web Design in a Nutshell 


\timately, the World Wide 


| Price ( 
eis j Web and the pages created 
£18.95 f for this network are based on 
HTML code. Despite the 
| Author | increasing propensity of the Web 
Jennifer Niederst design market to hide this code from 
the designer, at some point you will 
[ Publisher need to look at the source code, so a 
‘Daj more-than-passing knowledge of 
° Reilly HTML is essential. 
[isBN O'Reilly has produced an excellent 
meee guide that does just that: it provides 
1565925157 


concise information on all aspects of 
the HTML language from the first 
principles to adding advanced 
multimedia content to your pages. The 
author also has the foresight to 
acknowledge that all browsers are not 
made equal, and offers advice on 
working around these inconsistencies. 

Beginners may find the text-heavy 
pages hard going, while more advanced 
programmers will welcome its 
utilitarian approach. 


nll Verdict 


SSIES 
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Web Page Design in Easy Steps 


| Price 
£9.99 
Author 


Brian Austin 


Publisher 
Computer Step 


ISBN 
1840780398 


his slim volume is an 
excellent overview of how 
Web pages are created. 
Perfect for the beginner, the 
text is written in plain English and 
supported with well-chosen 
screenshots. After picking up the 
basics of site design, you'll get your 
pages up and running in no time at all. 

Chapters cover the crucial planning 
of a Website to advanced technologies 
such as animation, JavaScript and 
Shockwave. The two concluding 
chapters deal with promoting and 
marketing your Website and take a look 
at how successful sites have created 
their Internet presence. 

There is just enough info included to 
explain the concepts and skills under 
discussion. If you need an introduction 
to the key concepts of Web design, this 
manual provides it in abundance, but 
don't expect in-depth discussions or 
detailed hands-on tutorials. 


Verdict 
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